CSS text-align：center;没有使事物居中 [英] CSS text-align: center; is not centering things

问题描述

我有以下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;
}

我扔了字体大小的位只是看样式是否起作用（Firebug报告它正在工作，但我想看看）。这是工作。但是，文本并未在Firefox或Safari中的页脚中居中（尚未在IE中进行检查）。

I threw in the font-size bit just to see if the style was working (Firebug reports it is working but I wanted to see). It is working. But the text is not centered in the footer in Firefox or in Safari (have yet to check it in IE).

我尝试了无边距设置：0 auto;有无文本对齐方式：居中；

I tried with and without margin: 0 auto; and with and without text-align: center; no combo of those things worked.

以下是Firebug的输出：

Here is output from 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;
}

帮助？

推荐答案

我假设您希望所有项目彼此相邻，并且整个项目都水平居中。

I assume you want all the items next to each other, and the whole thing to be centered horizontally.

li 元素默认为 display：block ，占据所有水平空间。

li elements are display: block by default, taking up all the horizontal space.

添加

div#footer ul li { display: inline }

完成此操作后，您可能希望摆脱列表的项目符号：

once you've done that, you probably want to get rid of the list's bullets:

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

这篇关于CSS text-align：center;没有使事物居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！