CSS替代中心 [英] CSS alternative to center
问题描述
人们皱起了中心
标签,但对我来说,总是按照我想要的方式工作。然而, center
已被弃用,所以我会努力。
People frown upon the center
tag, but for me it always works just the way I want it. Nevertheless, center
is deprecated so I'll make an effort.
现在我看到很多人建议隐藏的CSS margin:0 auto;
但我甚至不能让它工作(见fiddle 此处)。其他人会去修改位置
或显示
,但总是会打断别的东西。
Now I see many people suggest the cryptic CSS margin: 0 auto;
but I can't even get it to work (see fiddle here). Other people will go modify position
or display
, but that always breaks something else.
如何使用css使 span
居中,使其行为与 center
标签完全相同?
How can I center a span
using css so that it behaves exactly like the center
tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
推荐答案
跨度
是一个内联元素,用于居中的 margin:0 auto
仅适用于宽度小于100%的非内联元素。
Span
is an inline element, and the margin: 0 auto
for centering only works on non-inline elements that have a width that is less than 100%.
一个选项是在容器上设置一个对齐方式,但这可能不是您想要的情况:
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
a href =http://jsfiddle.net/MgcDU/1270/> http://jsfiddle.net/MccDU/1270/
http://jsfiddle.net/MgcDU/1270/
其他选项是更改 span
的显示属性:
The other option is to change the display property of the span
:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
使用 display:table
消除了对硬编码特定宽度的需要。
Using display: table
eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http:// jsfiddle .net / MgcDU / 1271 /
这篇关于CSS替代中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!