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;
}

我加入了字体大小部分，只是为了测试样式是否起作用（Firebug报告它正在工作，但我想看看）。它正在工作。但在Firefox或Safari中，文本没有居中对齐在页脚中（尚未在IE中检查）。

我尝试使用和不使用margin：0 auto;以及使用和不使用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;
}

求助？

- RJ Cole

---

一个小建议：浏览器从右到左应用样式，所以当页面加载时，你的div#footer被解析了两次，这是一种不必要的性能损失（虽然很小），但你可以避免它，因为每个页面只能有一个#footer。（对我的英语表示抱歉）。 - Tae

谢谢Tae！我之前不知道这个。我对CSS只是一名初学者。 - RJ Cole

以下是一篇详细介绍何时使用 margin:auto; 和 text-align:center; 来居中元素的文章：https://blog.terresquall.com/2021/07/why-doesnt-text-align-center-work-a-primer-on-block-and-inline-elements-in-html-css/ - John Doe

Answer 1

我理解你想要让所有的项目挨在一起，并且整个内容水平居中。

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

添加

div#footer ul li { display: inline }

完成这一步之后，您可能希望去掉列表的项目符号：

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

- Pekka

---

是的，ul已经水平显示了。我希望导航在页脚中居中显示。我认为ul继承了页脚div的宽度。我设置了ul的宽度并使其居中。谢谢！ - RJ Cole

Answer 2

为使内联块级元素在其父元素水平居中对齐，在其父元素上添加 text-align:center。

- DanKodi

---

这对我有用，谢谢！ 我已经将 text-align: center 应用于文本元素，但没有应用于包含的 div。 - Andrew

完成了任务。将 text-align: center 应用于父元素即可。 - ppel123

Answer 3

如果您希望列表项中的文本居中，请尝试以下方法：

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

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

- Jits

Answer 4

使用 display: block; 和 margin: auto;，可以使 div 元素水平居中。

- Harman

---

欢迎来到stackoverflow。请考虑添加一个简短的代码片段来说明您的解决方案。 - sao

Answer 5

你可以使用flex-grow: 1。默认值为0，会导致text-align: center看起来像left。 https://css-tricks.com/almanac/properties/f/flex-grow/

- Lane

Answer 6

这对我有用：

  e.Row.Cells["cell no "].HorizontalAlign = HorizontalAlign.Center;

但是'css text-align = center '对我没有起作用

希望能对你有所帮助

- smita

Answer 7

我不知道你使用的是哪个Bootstrap版本，但是居中和块状元素的有用辅助类是 .center-block，因为这个类包含了margin和display CSS属性，而.text-center类只包含text-align属性。

Bootstrap辅助类center-block

- Shwan Namiq

---

他请求帮助关于CSS属性的问题。你建议使用Bootstrap来抽象化CSS，因此这个问题不在讨论范围内。 - Andrew