CSS替代中心

人们对中心标签不屑一顾,但对我而言,它总能以我想要的方式运作.尽管如此,中心已被弃用,所以我会努力.

现在我看到很多人建议隐藏的CSS边距：0 auto;但我甚至无法让它发挥作用(见小提琴here).其他人会去修改位置或显示,但这总会破坏别的东西.

如何使用css使跨度居中,以使其行为与中心标签完全相同？

<div class="container">
  <span class='btn btn-primary'>Click me!</span>
</div>

解决方法

Span是一个内联元素,边距：0 auto用于居中仅适用于宽度小于100％的非内联元素.

一种选择是在容器上设置对齐方式,尽管这可能不是您想要的情况：

div.container { text-align: center }

http://jsfiddle.net/MgcDU/1270/

另一个选项是更改范围的显示属性：

/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary { 
  display: table;
  margin: 0 auto;
}

使用display：table消除了对特定宽度进行硬编码的需要.它会根据其内容缩小或增长.

http://jsfiddle.net/MgcDU/1271/