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而异。

Answer 3

使用自动边距方法时，必须为元素定义宽度。它可以是任何单位，但必须定义：

.center {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

：）

Answer 4

.class {
    margin:auto; 
    display:table;
}

Idk为什么，但它总是像魅力一样。

Answer 5

我认为它不起作用，因为它不知道宽度

这不可能是因为：

如果我直接在div中包含相同的样式（style =“...”），它可以正常工作

...如果它在一种情况下不知道宽度，那么它也不会在另一种情况下。

如果使用style属性有效，则表明问题属于特异性。编写规则集的选择器，使specificity大于覆盖这些属性的任何规则（或者特殊性相等但规则集稍后出现在样式表中）。

您可以使用浏览器的开发人员工具查看正在应用于该元素的规则，以便您可以看到您必须更具体的选择器。

Answer 6

对于 Bootstrap 4 。对于父级div，您可以输入以下内容：

class='... justify-content-center text-center m-auto'

justify-content是常见情况

Bootstrap：任何跨度的中心

6 个答案: