如何在无序列表中的li元素内部居中文本 [英] How to center text inside a li element inside an unordered list

问题描述

此列表对我很有用，但< li> 元素中的文本不居中。

< li> 必须自动调整其内容。

 ＃ nav-menu {font-family：Verdana，Arial，Helvetica，sans-serif; height：30px; background-image：url（../ img / menu_bg.png）; background-repeat：repeat-x; border-bottom：dotted thin＃666666; border-top：dotted thin＃666666; text-align：center; width：800px;}＃nav-menu ul {list-style：none; padding：0; margin：auto 0;}＃nav-menu li {float：left; border-right：dotted thin＃666666; list-style：none; padding：0.5em 2em 0.5em 0.75em;}＃nav-menu li a {line-height：1.5em;颜色：＃333333; text-decoration：none; font-size：12px; font-weight：bold; display：block;}  

 < div id = -menu> < ul> < li class =current_page_item>< a href =＃title =Home>首页< / a> < li class =current_page_item>< a href =＃title =Home>首页< / a> < li class =current_page_item>< a href =＃title =Home>首页< / a> < li class =current_page_item>< a href =＃title =Home> zxczczxczHome< / a> < / ul>< / div>  

解决方案

当您向 li （）的左侧和右侧分配不等的 padding 0.75em 和 2em ）文字不能居中如果您将填充修改为：。 padding：0.5em 1em; （ 0.5em 顶部和底部， 1em 左右），然后它可以居中。

 ＃nav-menu {font-family：Verdana，Arial，Helvetica，sans-serif; height：30px; background-image：url（../ img / menu_bg.png）; background-repeat：repeat-x; border-bottom：dotted thin＃666666; border-top：dotted thin＃666666; text-align：center; width：800px;}＃nav-menu ul {list-style：none; padding：0; margin：auto 0;}＃nav-menu li {float：left; border-right：dotted thin＃666666; list-style：none; padding：0.5em 1em;}＃nav-menu li a {line-height：1.5em;颜色：＃333333; text-decoration：none; font-size：12px; font-weight：bold; display：block;}  

 < div id = -menu> < ul> < li class =current_page_item>< a href =＃title =首页>首页< / a>< / li> < li class =current_page_item>< a href =＃title =首页>首页< / a>< / li> < li class =current_page_item>< a href =＃title =首页>首页< / a>< / li> < li class =current_page_item>< a href =＃title =Home> zxczczxczHome< / a>< / li> < / ul>< / div>  

上述的JSFiddle演示。

This list is working great for me but the text within the <li> elements is not centering.

The <li>s must auto resize to their content.

#nav-menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 30px;
    background-image: url(../img/menu_bg.png);
    background-repeat: repeat-x;
    border-bottom: dotted thin #666666;
    border-top: dotted thin #666666;
    text-align: center;
    width: 800px;
}

#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: auto 0;
}

#nav-menu li {
    float: left;
    border-right: dotted thin #666666;
    list-style: none;
    padding: 0.5em 2em 0.5em 0.75em;
}

#nav-menu li a {
    line-height: 1.5em;
    color: #333333;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    display: block;
}

<div id="nav-menu">
    <ul>
        <li class="current_page_item"><a href="#" title="Home">Home</a>
        <li class="current_page_item"><a href="#" title="Home">Home</a>
        <li class="current_page_item"><a href="#" title="Home">Home</a>
        <li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a>
    </ul>
</div>

解决方案

While you're assigning unequal padding values to the left and right of the li (0.75em and 2em respectively) the text can't be centred since you're forcing it off-centre with the padding.

If you amend the padding to: padding: 0.5em 1em; (0.5em top and bottom, 1em left and right) then it can be centred.

#nav-menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 30px;
    background-image: url(../img/menu_bg.png);
    background-repeat: repeat-x;
    border-bottom: dotted thin #666666;
    border-top: dotted thin #666666;
    text-align: center;
    width: 800px;
}

#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: auto 0;
}

#nav-menu li {
    float: left;
    border-right: dotted thin #666666;
    list-style: none;
    padding: 0.5em 1em;
}

#nav-menu li a {
    line-height: 1.5em;
    color: #333333;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    display: block;
}

<div id="nav-menu">
    <ul>
        <li class="current_page_item"><a href="#" title="Home">Home</a></li>
        <li class="current_page_item"><a href="#" title="Home">Home</a></li>
        <li class="current_page_item"><a href="#" title="Home">Home</a></li>
        <li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a></li>
    </ul>
</div>

JSFiddle demo of the above.

这篇关于如何在无序列表中的li元素内部居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！