62

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

帮助？

4

7 回答 7

46

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

li默认情况下，元素会display: block占据所有水平空间。

添加

div#footer ul li { display: inline }

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

div#footer ul { list-style-type: none; padding: 0px; margin: 0px }
于 2011-06-05T13:09:56.973 回答
14

要使 inline-block 元素在其父级中水平居中对齐，请添加text-align:center到其父级。

于 2015-06-12T02:13:16.650 回答
7

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

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

ul#menu-utility-navigation li {
  text-align: center;
}
于 2011-06-05T13:10:33.073 回答
2

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

于 2020-01-24T13:51:19.140 回答
2

您可以使用flex-grow: 1. 默认值是0，它会导致text-align: center看起来像left.

https://css-tricks.com/almanac/properties/f/flex-grow/

于 2020-05-26T01:53:18.203 回答
0

这对我有用：

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

但'css text-align = center '对我不起作用

希望对你有帮助

于 2019-05-17T13:37:29.557 回答
-4

我不知道您使用任何 Bootstrap 版本，但有用的帮助类用于居中并阻止居中的元素，这是.center-block因为此类包含CSS 属性，但margin该类仅包含属性display.text-centertext-align

Bootstrap 助手类 center-block

于 2015-11-28T09:55:19.563 回答