[英]CSS Text Align Not Working With LIs
I've got a set of li
's containing text which I would like to be displayed and centered horizontally within their ul
with CSS. 我有一组包含文本的
li
,我想用CSS显示并在其ul
水平居中。 I can't seem to get this to work, another answer suggested using display:inline
but this did nothing. 我似乎无法让这个工作,另一个答案建议使用
display:inline
但这没有做任何事情。
Here's the code: 这是代码:
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;
}
requested html: 请求html:
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Links</li>
<li>Twitzar</li>
</ul>
I'm assuming you want to have your text centered within the list item? 我假设您希望将文本置于列表项的中心位置? You need to specify a width on the element for
text-align: center
to work correctly. 您需要在元素上指定
text-align: center
的宽度才能正常工作。
For an example refer to this fiddle: http://jsfiddle.net/sUxnK/1 有关示例请参阅此小提琴: http : //jsfiddle.net/sUxnK/1
Note, that the css was tweaked slightly to show the centered text. 请注意,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;
}
See this jsFiddle . 看到这个jsFiddle 。 In my solution, you do not need a width for each
li
. 在我的解决方案中,每个
li
都不需要宽度。 Rather, I used text-align: center
on the container ul
, made each li
display: inline
, and changed the margins and padding so that the borders appear correctly. 相反,我在容器
ul
上使用text-align: center
,使每个li
display: inline
,并更改边距和填充以使边框正确显示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.