Twitter Bootstrap 3：如何使块居中答案

【问题标题】：Twitter Bootstrap 3: How to center a blockTwitter Bootstrap 3：如何使块居中
【发布时间】：2017-04-03 14:02:01
【问题描述】：

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

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

【问题讨论】：

我们可以看看你的作品吗？

标签： twitter-bootstrap-3

【解决方案1】：

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

演示：http://bootply.com/91632

<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>

【讨论】：

【解决方案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

【讨论】：

有效，但由于行类而给出水平滚动条。更多信息dvdheiden.nl/2013/12/04/…
您可以将.center-block 类与style="width:400px;max-width:100%;" 结合使用以保持响应能力。

【解决方案3】：

你必须在中心块类中使用 style="width:value"

【讨论】：

【解决方案4】：

center-block 可以在 bootstrap 3.0 的第 12 行的utilities.less 中找到和mixins.less 在第 39 行

【讨论】：

【解决方案5】：

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

由于.col-md-* 上的float，将.col-md-* 类与.center-block 一起使用将不起作用。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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。

【讨论】：