Question

在我看来，引导程序3样式表中缺少类center-block。我错过了什么吗？

此处描述了它的用法，http://getbootstrap.com/css/#helper-classes-center

Answer 1

这是Bootstrap 3.0.1版本中的新功能，因此请确保您拥有最新版本（10/29）......

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>
</div>

Answer 2

这种方式效果更好（保持响应性）：

  <!-- somewhere deep start -->
  <div class="row">
    <div class="center-block col-md-4" style="float: none; background-color: grey">
      Hi there!
    </div>
  </div>
  <!-- somewhere deep end -->

http://www.bootply.com/0L5rBI2taZ

Answer 3

你必须使用style =＆＃34; width：value＆＃34;中心区类

Answer 4

中心块可以在第12行的utilities.less中的bootstrap 3.0中找到和第39行的mixins.less

Answer 5

我在申请时遇到了一些麻烦。确保你升级像Skelly说的那样。您还可以使用文本中心类。这可能符合您的目的。

Answer 6

您可以将班级.center-block与style="width:400px;max-width:100%;"结合使用，以保持响应能力。

由于.col-md-*上的.center-block，float课程与.col-md-*一起使用将无效。

Answer 7

这里的一些答案似乎不完整。以下是几种变体：

<style>
.box {
    height: 200px;
    width: 200px;
    border: 4px solid gray;
}
</style>    

<!-- This works: .container>.row>.center-block.box -->
<div class="container">
        <div class="row">
            <div class="center-block bg-primary box">This div is centered with .center-block</div>
        </div>
    </div>

<!-- This does not work -->    
<div class="container">
        <div class="row">
            <div class="center-block bg-primary box col-xs-4">This div is centered with .center-block</div>
        </div>
    </div>

<!-- This is the hybrid solution from other answers:
     .container>.row>.col-xs-6>.center-block.box
 -->   
<div class="container">
        <div class="row">
            <div class="col-xs-6 bg-info">
                <div class="center-block bg-primary box">This div is centered with .center-block</div>
            </div>
        </div>
    </div>

要使它与col- *类一起使用，您需要将.center-block包装在.col- *类中，但要记住要么添加另一个设置宽度的类（在这种情况下为.box），或者通过赋予宽度来改变.center-block本身。

在bootply上查看。

Answer 8

center-block不好主意，因为它覆盖了屏幕上的一部分，您无法点击字段或按钮。 col-md-offset-?是更好的选择。

如果类为col-md-offset-3，则使用col-sm-6是更好的选择。只需更改数字即可使您的区块居中。

Twitter Bootstrap 3：如何将块居中

8 个答案: