CSS text-align:center; 不工作

Question

我有以下html:

<div id="footer">
    <ul id="menu-utility-navigation" class="links clearfix">
        <li class="menu-685 menu-site_map first">Site Map
        </li>
        <li class="menu-686 menu-privacy_policy">Privacy Policy
        </li>
        <li class="menu-687 menu-terms___conditions">Terms &amp; Conditions
        </li>
        <li class="menu-688 menu-contact_us last">Contact Us
        </li>
    </ul>
</div>

使用以下CSS:

div#footer {
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 700px;
}

我扔了font-size位只是为了看风格是否正常工作(Firebug报告它正在工作,但我想看到).这是工作.但是文本并没有集中在Firefox或Safari中的页脚中(还没有在IE中检查它).

我试着有没有保证金:0自动; 有和没有text-align:center; 没有这些东西的组合.

这是从firebug出来的:

div#footer {
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 700px;
}

Inherited fromdiv#page
#skip-to-nav, #page {
    line-height: 1.5em;
}

Inherited frombody.html
body {
    color: #666666;
    font-family: verdana,arial,sans-serif;
}

救命？

Answer 1

我假设您希望所有项目彼此相邻,并且整个事物要水平居中.

lidisplay: block默认情况下,元素占用所有水平空间.

加

div#footer ul li { display: inline }

一旦你完成了,你可能想要摆脱列表的子弹:

div#footer ul { list-style-type: none; padding: 0px; margin: 0px }

Answer 2

使用display: block; margin: auto; 它将 div 居中

Answer 3

如果您希望列表项中的文本居中,请尝试:

ul#menu-utility-navigation {
  width: 100%;
}

ul#menu-utility-navigation li {
  text-align: center;
}

Answer 4

要使内联块元素在其父级中水平对齐中心,请添加text-align:center到其父级.