CSS 文本对齐：居中；没有使事物居中
我有以下 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>
使用以下 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
我假设您希望所有项目彼此相邻，并且整个项目水平居中。
li元素默认为display: block，占据所有水平空间。添加
完成后，您可能想要删除列表的项目符号：
I assume you want all the items next to each other, and the whole thing to be centered horizontally.
lielements aredisplay: blockby default, taking up all the horizontal space.Add
once you've done that, you probably want to get rid of the list's bullets:
要使内联块元素在其父级中水平居中，请将
text-align:center添加到其父级。To make a inline-block element align center horizontally in its parent, add
text-align:centerto its parent.如果您希望列表项中的文本居中，请尝试：
If you want the text within the list items to be centred, try:
使用
display: block;margin: auto;它将使 div 居中
Use
display: block;margin: auto;it will center the div
您可以使用
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 is0and it will cause thetext-align: centerlooks likeleft.https://css-tricks.com/almanac/properties/f/flex-grow/
这对我有用：
但是
'css text-align = center '对我不起作用希望它能帮助你
This worked for me :
But
'css text-align = center 'didn't worked for mehope it will help you
我不知道您使用任何 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-blockbecause this class containmarginanddisplayCSS properties but the.text-centerclass only contain thetext-alignpropertyBootstrap Helper Class center-block