CSS 文本对齐不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12500989/
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
CSS text-align not working
提问by user1269625
I have this css code here
我这里有这个 css 代码
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center;and vertical-align:middle;but neither of them worked.
我想做的是将我的课堂导航居中。我尝试使用text-align:center;，vertical-align:middle;但它们都不起作用。
and here is the HTML Code
这是 HTML 代码
<div class="navigation">
<ul>
<li><a href="http://surfthecurve.ca/">home</a></li>
<li><a href="http://surfthecurve.ca/?page_id=7">about</a></li>
<li><a href="http://surfthecurve.ca/?page_id=9">tutors</a></li>
<li><a href="http://surfthecurve.ca/?page_id=11">students</a></li>
<li><a href="http://surfthecurve.ca/?page_id=13">contact us</a></li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
当我说它不起作用时，我的意思是文本向左对齐。
回答by j08691
Change the rule on your <a>element from:
更改<a>元素上的规则：
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}?
to
到
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}?
Just add two new rules (width:100%;and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.
只需添加两个新规则（width:100%;和text-align:center;）。您需要使锚点展开以占据列表项的整个宽度，然后将其文本对齐居中。
回答by madth3
You have to make the ULinside the divbehave like a block. Try adding
你必须让UL内部div表现得像块。尝试添加
.navigation ul {
display: inline-block;
}
回答by andyb
I try to avoid floating elements unless the design really needs it. Because you have floated the <li>they are out of normal flow.
我尽量避免浮动元素，除非设计真的需要它。因为你已经飘了<li>他们不正常的流动。
If you add .navigation { text-align:center; }and change .navigation li { float: left; }to .navigation li { display: inline-block; }then entire navigation will be centred.
如果您添加.navigation { text-align:center; }并更改.navigation li { float: left; }为，.navigation li { display: inline-block; }则整个导航将居中。
One caveat to this approach is that display: inline-block;is not supported in IE6 and needs a workaround to make it work in IE7.
这种方法的一个警告是display: inline-block;IE6 不支持它，需要一种解决方法使其在 IE7 中工作。
