CSS文本對齊不能使用LI

我有一套li的包含文本，我想用CSS在其ul中水平居中顯示。我似乎無法得到這個工作，另一個答案建議使用display:inline，但這沒有做什麼。CSS文本對齊不能使用LI

下面的代碼：

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>

來源

2011-12-30 Infra Stank

集中在什麼？請張貼您的html標記。 – mrtsherman 2011-12-30 17:25:18

'text-align：center'將不起作用，如果你沒有在你的'li'上指定寬度 – ptriek 2011-12-30 17:27:36

@ptriek謝謝，希望將它們粘在一個錨標籤中將起作用。 – 2011-12-30 17:29:42

我假設你希望你的文字列表項目中的中心？您需要指定元素的寬度以使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; 
}

來源

2011-12-30 17:33:25 Jesse

謝謝，效果很好。 – 2011-12-30 17:39:34

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

來源

2011-12-30 17:39:28 Jacob

CSS文本對齊不能使用LI

回答

相關問題