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屋！