12

我在使用类来居中时遇到问题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 类工作？

4

6 回答 6

20

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

<div class="row-fluid">

    <div class="span12 text-center">

    My content to be centered here

    </div>

</div>

它对我来说非常有效...... :)

于 2013-07-02T22:51:58.987 回答
8

您可以将其居中：

.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 上都不同。

于 2013-04-29T06:06:17.787 回答
3

使用 auto-margin 方法时，您必须定义元素的宽度。它可以是任何单位，但必须定义：

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

:)

于 2013-04-29T06:00:41.293 回答
2 
.class {
    margin:auto; 
    display:table;
}

不知道为什么，但它总是像一个魅力。

于 2016-08-20T22:09:23.270 回答
1

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

这不可能是真的，因为：

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

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

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

您可以使用浏览器的开发人员工具来查看哪些规则被应用到元素，这样您就可以看到选择器必须比它更具体。

于 2013-04-29T06:08:43.737 回答
1

对于引导程序 4。为父母说，div您可以输入：

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

justify-content适用于常见情况

于 2020-11-02T02:58:49.940 回答