CSS 文本对齐:居中;不工作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6243070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:41:46  来源:igfitidea点击:

CSS text-align: center; not working

csstext-align

提问by RJ Cole

I have the following html:

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

With the following CSS:

使用以下 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).

我加入了字体大小位只是为了查看样式是否有效(Firebug 报告它正在工作,但我想看看)。这是工作。但是文本没有在 Firefox 或 Safari 中的页脚中居中(尚未在 IE 中检查)。

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

我试过有和没有边距:0 auto; 有和没有文本对齐:居中;这些东西的组合没有奏效。

here is out put 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?

帮助?

采纳答案by Pekka

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

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

lielements are display: blockby default, taking up all the horizontal space.

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

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 }

回答by DanKodi

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

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

回答by Jits

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

回答by smita

This worked for me :

这对我有用:

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

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

'css text-align = center '对我没用

hope it will help you

希望它会帮助你

回答by Lane

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

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

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

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

回答by Harman

Use margin: auto;it will center the div

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

回答by Shwan Namiq

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-blockbecause this class contain marginand displayCSS properties but the .text-centerclass only contain the text-alignproperty

我不知道你使用任何 Bootstrap 版本,但有用的帮助类用于居中和阻止居中的元素是.center-block因为这个类包含margindisplayCSS 属性,但.text-center该类只包含该text-align属性

Bootstrap Helper Class center-block

Bootstrap Helper 类中心块