CSS 如何在无序列表中将 li 元素内的文本居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5147830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center text inside a li element inside an unordered list
提问by Rob
This list is working great for me but the text within the <li>elements is not centering.
这个列表对我很有用，但<li>元素中的文本没有居中。
The <li>s must auto resize to their content.
在<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>回答by David says reinstate Monica
While you're assigning unequal paddingvalues to the left and right of the li(0.75emand 2emrespectively) the text can't be centredsince you're forcing it off-centre with the padding.
当您分别padding为li(0.75em和2em)的左侧和右侧分配不相等的值时，文本无法居中，因为您使用padding.
If you amend the padding to: padding: 0.5em 1em;(0.5emtop and bottom, 1emleft and right) then it can be centred.
如果您修改填充到：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 demoof the above.
上面的JSFiddle演示。
回答by isotrope
If you want various sizes, then change the right or left padding property to be the same as the other one:
如果您想要各种尺寸，则将右侧或左侧的填充属性更改为与另一个相同：
padding: 0.5em 2em 0.5em 2em;
or
或者
padding: 0.5em 0.75em 0.5em 0.75em;
I've fiddled around with it a little: http://jsfiddle.net/Q32hn/Don't forget to always close your ListItems
我稍微摆弄了一下：http: //jsfiddle.net/Q32hn/不要忘记总是关闭你的 ListItems
