44

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

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

4

7 回答 7

41

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

于 2013-11-04T00:48:38.227 回答
19

它以这种方式工作得更好（保持响应能力）：

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

于 2014-09-10T13:58:53.920 回答
11

您必须将 style="width:value" 与中心块类一起使用

于 2014-07-24T06:57:20.173 回答
3

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

于 2013-11-03T22:38:56.177 回答
2

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

由于on ，使用.col-md-*class with.center-block将不起作用。float.col-md-*

于 2017-01-25T09:11:06.677 回答
1

这里的一些答案似乎不完整。这里有几个变体：

<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上查看。

于 2017-04-03T06:02:01.783 回答
1

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

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

于 2015-10-21T20:51:00.460 回答