引导：中心的任何跨度

我使用一个类居中时有一个问题我span：引导：中心的任何跨度

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

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

这是不行的，显然它是由自举行向* CSS覆盖。但是，如果我直接在div中包含相同的样式（style="..."），它将起作用。

我认为它不工作，因为它不知道宽度，所以我尝试使用偏移量，但是当按钮不居中以及与.CSS。由于我的button宽度由外部JavaScript设置，因此我无法指定宽度。

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

来源

2013-04-29 Aki

从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-02 22:51:58

谢谢！这绝对是最干净的方法。 – Nebri 2015-02-25 15:29:22

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

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

来源

2013-04-29 06:00:41 Kyle

我增加了宽度，但不知何故span5仍然不集中，它的大小是正确的，当我检查我看到它的元素，但它确实不集中：/。 – Aki 2013-04-29 06:12:04

你可以居中：

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

JSFiddle

或者你可以使用：

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

我倾向于避免!important，因为你永远不知道它何时会与其他一些CSS不同。有趣的是，上面的影响在流动和流动方面都有所不同。

来源

2013-04-29 06:06:17 pickypg

请不要使用'！important'。这是一把大锤。如果你使用它，然后想重写它，那么你就不能做出一些重要的事情，所以你再也遇到同样的问题......只要！ – Quentin 2013-04-29 06:09:28

同意。我没有注意到它一开始是'row-fluid'，并且在我最初的调整中尝试了'row'（参见[无编号的JSFiddle]（http://jsfiddle.net/WesWz/））。这是我的第一个调整工作，然后我没有它的工作。 – pickypg 2013-04-29 06:12:41

第二种解决方案很好，非常好！ – Aki 2013-04-29 06:15:17

我认为这是行不通的，因为它不知道宽度

，因为这不可能是真的：

如果我包括在div相同的风格直接（style =“...”）它的工作原理

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

如果使用style属性起作用，那么这是一个迹象表明问题是特异性问题之一。编写规则集的选择器，以便specificity大于任何规则覆盖这些属性的规则（或者使特性相同，但规则集稍后出现在样式表中）。

您可以使用浏览器的开发工具来查看哪些规则正在应用到元素，以便您可以看到选择器必须比特定的更具体。

来源

2013-04-29 06:08:43 Quentin

确实，感谢您的解释！自从他提供修补程序的代码示例以来，我接受了pickypg的回答。 – Aki 2013-04-29 06:16:27

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

IDK为什么，但它始终就像一个魅力。

来源

2016-08-20 22:09:23 Wang

引导：中心的任何跨度

回答

相关问题