如何将文本置于无序列表中的li元素内

Question

这个列表对我很有用,但<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;
    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>

Answer 1

当你在(并且分别)padding左侧和右侧分配不相等的值时,文本不能居中,因为你强迫它偏离中心.li0.75em2empadding

如果您修改填充到: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;
    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演示.

Answer 2

如果您想要各种尺寸,请将右侧或左侧填充属性更改为与另一个相同:

padding: 0.5em 2em 0.5em 2em;

要么

padding: 0.5em 0.75em 0.5em 0.75em;

我已经摆弄了一下:http://jsfiddle.net/Q32hn/ 不要忘记总是关闭你的ListItems