CSS text-align无效

Question

我这里有这个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;
}

我想要做的是集中我的班级导航.我尝试使用text-align:center;,vertical-align:middle;但他们都没有工作.

这是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-->

当我说它不起作用时,我的意思是文本与左边对齐.

Answer 1

更改<a>元素的规则:

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}?

至

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
    width:100%;
    text-align:center;
}?

只需添加两个新规则(width:100%;和text-align:center;).您需要使锚点展开以占据列表项的整个宽度,然后将文本对齐居中.

jsFiddle例子

Answer 2

你必须使UL内部div行为像一个块.尝试添加

.navigation ul {
     display: inline-block;
}