Bootstrap:任何跨度的中心

Question

使用课程来集中我时遇到问题span:

.center {
    float:none;
    margin-left: auto;
    margin-right: auto;
}

<div class="row-fluid">
    <div class="center span5">
    <button></button>
    </div>
</div>

这不起作用,显然它被bootstrap row-*CSS覆盖.但是,如果我直接在div中包含相同的样式(style="...")它可以工作.

我认为它不起作用,因为它不知道宽度,所以我尝试使用偏移,但是当按钮不在中心时与.CSS一样.我无法指定宽度,因为我的button宽度是由外部JavaScript设置的.

在这种情况下如何使.center类工作？

Answer 1

从Bootstrap 2.3.0开始,您可以使用内置类.text-center.

<div class="row-fluid">

    <div class="span12 text-center">

    My content to be centered here

    </div>

</div>

它对我来说很完美...... :)

Answer 2

您可以将其集中在:

.center {
   margin: 0 auto !important;
   float: none !important;
}

的jsfiddle

或者您可以使用:

.row-fluid [class*="span"].center, .center {
    margin: 0 auto;
    float: none;
}

我倾向于避免,!important因为你永远不知道它可能与其他CSS有什么不同.有趣的是,上述影响在.row和.row-fluid上都有所不同.