19

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

当我说它不起作用时，我的意思是文本向左对齐。

4

3 回答 3

35

更改<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 示例

于 2012-09-19T18:52:20.220 回答
15

您必须使UL内部div表现得像一个块。尝试添加

.navigation ul {
     display: inline-block;
}
于 2012-09-19T18:57:56.377 回答
4

我尽量避免浮动元素，除非设计真的需要它。因为你已经漂浮了，<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.

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.

于 2012-09-19T19:00:29.093 回答