提问



如何在Twitter Bootstrap 3中将容器中的一个列大小的div(12列)居中。[107]


请看起初小提琴。 [108]


<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>


所以,我希望div,类centered在容器中居中。如果有多个div,我可以使用一行,但是现在我只想要一个在容器中居中的一列大小的div(12列)。


我也不确定上述方法是否足够好,因为意图不是将div抵消一半。我不需要div之外的自由空间,div的内容按比例缩小。我希望在div之外的空格均匀分布(缩小到容器宽度==一列)。

最佳参考


在Bootstrap 3中有两种方法可以使列<div>居中:


方法1(抵消):



第一种方法使用Bootstrap自己的偏移类,因此它不需要更改标记,也不需要额外的CSS。关键是设置偏移量等于行剩余大小的一半。例如,一个大小为2的列将通过添加5的偏移量来居中,即s (12-2)/2


在标记中,这看起来像:


<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>


现在,这种方法有一个明显的缺点,它只适用于偶数列,所以只有.col-X-2.col-X-4col-X-6,[[57支持]]和col-X-10





方法2(旧边距:自动)



您可以使用经过验证的margin: 0 auto;技术居中任何列大小,您只需要处理Bootstrap网格系统添加的浮动。我建议定义一个自定义CSS类如下:


.col-centered{
    float: none;
    margin: 0 auto;
}


现在,您可以将其添加到任何屏幕大小的任何列大小,它将与Bootstrap的响应式布局无缝协作:


<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>


注意:使用这两种技术,您可以跳过.row元素并使列在.container内居中,但由于填充,您会注意到实际列大小的最小差异在容器类中。





更新


从v3.0.1开始,Bootstrap有一个名为center-block的内置类,它使用margin: 0 auto但缺少float:none。您可以将其添加到CSS以使其与网格系统一起使用。

其它参考1


居中列的首选方法是使用偏移(即:col-md-offset-3)


Bootstrap 3.x居中示例[109]


对于居中元素,有一个center-block辅助类。[110]


您还可以使用text-center中心文本(和内联元素)。


演示:http://bootply.com/91632 [111]


编辑 - 如评论中所述,center-block适用于列内容和display:block元素,但不会对列本身起作用([[col-* divs)因为Bootstrap使用float





更新2018



现在使用 Bootstrap 4 居中方法已更改..



  • text-center仍然用于display:inline元素

  • mx-autocenter-block替换为居中display:block元素

  • offset-*mx-auto可用于居中网格列



mx-auto(自动x轴边距)将display:blockdisplay:flex元素置于定义的宽度,(%vw]],px等。)。默认情况下在网格列上使用Flexbox ,因此还有各种flexbox居中方法。


演示 Bootstrap 4水平居中[112]


对于BS4中的垂直居中,请参阅 https://stackoverflow.com/a/41464397/171456

其它参考2


现在Bootstrap 3.1.1正在使用.center-block,这个辅助类可以与列系统一起使用。


Bootstrap 3助手班级中心。[114]


请检查此jsfiddle DEMO :[115]


<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>





使用col-center-block辅助类的行列中心。


.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

其它参考3


只需将此添加到您的自定义CSS文件中,不建议直接编辑Bootstrap CSS文件并取消使用cdn的能力。


.center-block {
    float: none !important
}


为什么吗


Bootstrap CSS(Ver 3.7及更低版本)使用: margin:0 auto; ,但它被size容器的float属性覆盖。


PS :
添加此类后,不要忘记按正确的顺序设置类。


<div class="col-md-6 center-block">Example</div>

其它参考4


Bootstrap 3 现在有一个内置类.center-block


.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


如果您仍在使用2.X,则只需将其添加到CSS中即可。

其它参考5


我对中心列的处理方法是对列使用display: inline-block,对容器父对象使用text-align: center


您只需将CSS类居中添加到row


HTML:



<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>


CSS:



.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}


的jsfiddle:
http://jsfiddle.net/steyffi/ug4fzcjd/[116]

其它参考6


Bootstrap版本3有一个.text-center类。[117]


只需添加此类:


text-center


它只会加载这种风格:


.text-center {
    text-align: center;
}


例:


<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

其它参考7


这很有效。可能是一种hackish方式,但它很好用。测试了响应性(Y)。


.centered {
    background-color: teal;
    text-align: center;
}







其它参考8


您可以使用text-center作为行,并确保内部div具有display:inline-block(不float)


如:


<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>


和css:


.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}


小提琴:
http://jsfiddle.net/DTcHh/3177/[118]

其它参考9


只需将显示内容的一列设置为col-xs-12(mobile-first ;-)并仅配置容器以控制您希望居中内容的宽度,因此:




.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>



要使我们需要使用以下代码。 cols是除了margin auto之外的浮动元素。我们也将它设置为float,


<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>


为了使上面的col-lg-1居中,我们将写:


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


要将内容居中在div中,请使用text-align:center


.centered {
    text-align: center;
}


如果您只想将其居中放在桌面和大屏幕上,而不是移动设备上,请使用以下媒体查询。


@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}


并且仅在移动版本上居中div,请使用以下代码。


@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

其它参考10


这可能不是最好的答案,但还有一个更有创意的解决方案。正如koala_dev所指出的,列偏移仅适用于偶数列大小。但是,通过嵌套行,您也可以实现对齐不均匀的列。


要坚持原始问题,你想在12格的网格中居中一列1。



  1. 将第2列居中,将其偏移5

  2. 创建一个嵌套行,这样您就可以在2列中获得新的12列。

  3. 由于您希望将列居中1,并且1是2的一半(我们在步骤1中居中),您现在需要在嵌套行中居中6列,这可以通过偏移轻松完成它3.



例如:


<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>


看到这个小提琴,请注意你必须增加输出窗口的大小,以便看到结果,否则列将包装。[119]

其它参考11


抵消的另一种方法是有两个空行,例如:


<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

其它参考12


<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

其它参考13


我们可以通过使用表格布局机制来实现这一点:



机制是:



  1. 将所有列包装在一个div中。

  2. 将该div设为具有固定布局的表格。

  3. 将每列作为表格单元格。

  4. 使用vertical-align属性控制内容位置。



示例演示在这里



[120] [121]

其它参考14


正如koala_dev在他的方法1中使用的那样,我更喜欢偏移方法而不是中心块或边距,这些方法的用途有限,但他提到:



  现在,这种方法有一个明显的缺点,它只适用于偶数列尺寸,因此只有.col-X-2,.col-X-4,col-X-6,col-X-8和col-支持X-10。



对于奇数列,可以使用以下方法解决这个问题。


<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

其它参考15


您可以使用非常灵活的解决方案flexbox到您的Bootstrap。


justify-content: center;


可以使您的列居中。


查看 flex 。[122]

其它参考16


因为我永远不需要在.row中只集中一个.col-,所以我在目标列的包装.row上设置了以下类。


.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}





<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

其它参考17


对于那些希望将列元素置于屏幕中心的人,当你没有确切的数字来填充你的网格时,我写了一小段JavaScript来返回类名:


function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}


如果您有5个元素,并且希望在md屏幕上每行3个,则执行以下操作:


colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]


请记住,第二个参数必须可以被12分割。

其它参考18


要在Bootstrap行中居中多个列 - 并且cols的数量是奇数,只需将此css类添加到该行中的所有列:


.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}


所以在你的HTML中你有类似的东西:


<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

其它参考19


这不是我的代码,但它完美地工作(在Bootstrap 3上测试)并且我不必乱用col-offset。


演示:




/* centered columns styles */

.row-centered {
  text-align: center;
}

.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
  text-align: center;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row row-centered">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>



如果你把它放在你的行上,里面的所有列都将居中:


.row-centered {
    display: flex;
    justify-content: space-between;
}

其它参考20


尝试这个


<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>


您可以使用其他col以及col-md-2等。

其它参考21


更准确地说,Bootstrap的网格系统包含12列并以任何内容为中心,例如,内容占用一列。一个需要占用两列Bootstrap的网格,并将内容放在一半的两个占用的列。


<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>


col-xs-offset-5告诉网格系统从哪里开始放置内容。


col-xs-2告诉网格系统内容占用的剩余列数。


居中将是一个定义的类,将内容集中。


以下是这个示例在Bootstrap的网格系统中的样子。


列:


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12


.......偏移.......。数据。 .......不曾用过........

其它参考22


试试这个代码。


<body class="container">
<div class="col-lg-1 col-lg-offset-10">
    <img data-src="holder.js/100x100" alt="" />
</div>





在这里我使用了col-lg-1,并且偏移应该是10,以便在大型设备上正确居中div,如果你需要它将媒体中心放到大型设备上然后只需将lg更改为md等等,让我知道如果有任何问题。

其它参考23


别忘了添加!important。然后你可以确定元素真的会在中心:


.col-centered{
  float: none !important;
  margin: 0 auto !important;
}

其它参考24


方法1:


<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>


方法2:


CSS


.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>


Bootstrap技巧,示例和工具:OnAirCode [123]

其它参考25


我建议只使用类text-center:


<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

其它参考26


使用Bootstrap v4,只需将.justify-content-center添加到.row <div>即可完成


<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>


https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content[124]