CSS 文本对齐:居中;没有使事物居中

发布于 2024-11-14 05:16:33 字数 1159 浏览 9 评论 0原文

我有以下 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;以及有和没有文本对齐:居中;这些东西的组合都不起作用。

以下是 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 have the following 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 & Conditions
        </li>
        <li class="menu-688 menu-contact_us last">Contact Us
        </li>
    </ul>
</div>

With the following CSS:

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

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).

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

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

Help?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

带上头具痛哭 2024-11-21 05:16:34

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

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

添加

div#footer ul li { display: inline }

完成后,您可能想要删除列表的项目符号:

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

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

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

Add

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 }
原野 2024-11-21 05:16:34

要使内联块元素在其父级中水平居中,请将 text-align:center 添加到其父级。

To make a inline-block element align center horizontally in its parent, add text-align:center to its parent.

老娘不死你永远是小三 2024-11-21 05:16:34

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

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

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

If you want the text within the list items to be centred, try:

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

ul#menu-utility-navigation li {
  text-align: center;
}
时光磨忆 2024-11-21 05:16:34

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

Use display: block; margin: auto;
it will center the div

赤濁 2024-11-21 05:16:34

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

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

You can use flex-grow: 1. The default value is 0 and it will cause the text-align: center looks like left.

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

无所谓啦 2024-11-21 05:16:34

这对我有用:

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

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

希望它能帮助你

This worked for me :

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

But 'css text-align = center ' didn't worked for me

hope it will help you

烂柯人 2024-11-21 05:16:34

我不知道您使用任何 Bootstrap 版本,但用于居中和阻止中心元素的有用帮助程序类是 .center-block 因为此类包含 margin 和 < code>display CSS 属性,但 .text-center 类仅包含 text-align 属性

引导助手类中心块

I don't Know you use any Bootstrap version but the useful helper class for centering and block an element in center it is .center-block because this class contain margin and display CSS properties but the .text-center class only contain the text-align property

Bootstrap Helper Class center-block

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文