使用Twitter Bootstrap 3中心列

如何在Twitter Bootstrap 3中将容器中一列大小的div居中（12列）

请看起动器小提琴 。 

<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的偏移量（即(12-2)/2居中。

在标记中，这看起来像： 

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

现在，这种方法有一个明显的缺点， 它只适用于偶数列大小 ，所以只有.col-X-2 ， .col-X-4 ， col-X-6 ， col-X-8和col-X-10支持。

方法2（旧的margin：auto）

您可以通过使用可靠的margin: 0 auto;将任何列大小居中 margin: 0 auto; 技术，你只需要照顾由Bootstrap的网格系统添加的浮动。 我build议定义如下的自定义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但是缺lessfloat:none 。 你可以添加到你的CSS，使其与网格系统一起工作。

居中列的首选方法是使用“偏移”（即： col-md-offset-3 ）

Bootstrap 3.x居中示例

对于中心元素 ，有一个center-block 助手类 。

您还可以使用text-center来居中文本 （和内联元素）。

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

编辑 – 正如评论中所提到的， center-block在列内容上工作，并display:block元素，但不会在列本身（ col-* divs）上工作，因为Bootstrap使用float 。

2017年更新

现在使用Bootstrap 4 ，对中方法已经改变。

  • text-center仍然用于display:inline元素
  • mx-auto将center-blockreplace为中心display:block元素
  • offset-* 或 mx-auto可用于居中网格列

mx-auto （自动x轴边距）将居中display:block或display:flex具有定义宽度 （ % ， vw ， px等）的display:flex元素。 Flexbox在网格列上默认使用 ，所以也有各种柔版盒居中方法。

演示引导4水平居中

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

现在Bootstrap 3.1.1与.center-block一起工作，这个辅助类可以和列系统一起工作。

Bootstrap 3 助手类中心 。

请检查这个jsfiddle DEMO ： 

 <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; */ }

只需将其添加到您的自定义CSS文件中，不build议直接编辑Bootstrap CSS文件，并且可以使用cdn的function。 

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

引导程序3现在有一个内置的这个.center-block 

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

如果您仍在使用2.X，那么只需将其添加到您的CSS。

我的中心列的方法是使用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/

引导版本3有一个.text-center类。

只需添加这个类： 

 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>

这工作。 可能是一个骇人的方式，但它很好地工作。 它被testing的响应（Y）。 

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

桌面

响应

您可以使用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/

只需设置一个显示内容的列到col-xs-12（mobile-first ;-)，然后configuration容器来控制你希望居中的内容有多宽，所以： 

 .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之外的浮动元素。 我们也将它设置为无， 

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

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

要坚持原来的问题，你想在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>

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

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

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

我们可以通过使用表格布局机制来实现 –

机制是 –

  1. 将所有列包装在一个div中
  2. 将该div作为固定布局的表格
  3. 将每列作为表格单元格
  4. 使用垂直alignment属性来控制内容的位置

示例演示在这里

在这里输入图像描述 

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

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

因为我从来没有必要只将一个.col-放在一个.row ，所以我在目标列的wrap .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>

对于那些希望将屏幕上的列元素居中的人，当你没有确切的数字来填充你的网格时，我写了一小段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除。

如果你把这个放在你的行上，那么里面的所有列都将居中。 

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

尝试这个 

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

你也可以像col-md-2一样使用其他col 。

您可以使用非常灵活的解决schemeflexbox来引导

justify-content: center;

可以中心你的专栏

检查此链接https://css-tricks.com/almanac/properties/f/flex/

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

不要忘记添加!important 。 那么你可以肯定，元素真的会在中心： 

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

这里是你的问题的解决scheme，请注意，如果它适合你，它会帮助其他devise师。 

 <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，它就可以在中介上工作小设备。 谢谢

关于Bootstrap中的中心块类 

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

在某些情况下，它不起作用，例如带有左浮动列表项的列表。 将此更改显示修正为表格。 

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

没有CSS是必需的。 您可以简单地使用HTML5 <center></center>标签。

它会自动调整你的内容到中心。

这是一个总是让我对Bootstrap坚持的事情。 我在3.0之前就已经讲过这个问题http://tentaclecms.com/blog/2013/07/centring-columns-in-bootstrap/

使用下面的工作很好的替代。 

 .center, .sm-center, .md-center... { margin: 0 auto; float: none;

}

https://github.com/adampatterson/Dock/blob/master/assets/less/src/grid.less#L40

    Interesting Posts

    自动页边距不会在页面中居中放置图像

    如何以“位置：绝对”元素为中心

    用CSS垂直居中旋转的文本

    如何水平居中可变宽度的浮动元素？

    居中在CSS网格

    中心位置：固定元素

    如何在Tkinter屏幕上放置一个窗口？

    如何在WinForms中保持一个标签？

    垂直居中div内的两个元素

    Twitter Bootstrap：进度条上的中心文本