CSS文本對齊不與LI一起使用

Question

我有一組包含文本的li ，我想用CSS顯示並在其ul水平居中。 我似乎無法讓這個工作，另一個答案建議使用display:inline但這沒有做任何事情。

這是代碼：

header li {
    margin-left:20px;
    margin-right:0px;
    border-left:1px #FFF solid ;
    float:left;
    color:#FFF;
    padding:2px 2px 2px 2px;
    margin-bottom:10px;
    text-align:center;
}

header ul {
    width:321px;
    margin-left:auto;
    margin-right:auto;
    background:url(repeatback.png);
    height:30px;
}

請求html：

<ul>
    <li>About</li>
    <li>Portfolio</li>
    <li>Resume</li>
    <li>Links</li>
    <li>Twitzar</li>
</ul>

Answer 1

我假設您希望將文本置於列表項的中心位置？ 您需要在元素上指定text-align: center的寬度才能正常工作。

有關示例請參閱此小提琴： http ： //jsfiddle.net/sUxnK/1

請注意，css略微調整以顯示居中文本。

<div id="header">
    <ul>
        <li>About</li>
        <li>Portfolio</li>
        <li>Resume</li>
        <li>Links</li>
        <li>Twitzar</li>
    </ul>
</div>

#header ul {
    width:700px;
    margin: 0px auto;
    height: 30px;
}

#header li{
    margin: 0px 0px 10px 20px;
    border: 1px dotted #ccc;
    float:left;
    padding:2px;
    width: 100px;
    text-align:center;
}

Answer 2

看到這個jsFiddle 。 在我的解決方案中，每個li都不需要寬度。 相反，我在容器ul上使用text-align: center ，使每個li display: inline ，並更改邊距和填充以使邊框正確顯示。