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.
li
elements aredisplay: block
by 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:center
to 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 is0
and it will cause thetext-align: center
looks 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-block
because this class containmargin
anddisplay
CSS properties but the.text-center
class only contain thetext-align
propertyBootstrap Helper Class center-block