使用Twitter Bootstrap 3将列居中

问题描述 投票：1077回答：34

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

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

我想要一个div，一个类.centered在容器中居中。如果有多个divs，我可能会使用一行，但是现在我只想要一个div，其中一列的大小位于容器中心（12列）。

我也不确定上述方法是否足够好，因为意图不是将div抵消一半。我不需要在div之外的自由空间，并且div的内容按比例缩小。我想在div外面清空空间以均匀分布（收缩直到容器宽度等于一列）。

css twitter-bootstrap twitter-bootstrap-3 centering
34个回答
1904
投票

在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;技术将任何列大小居中。您只需要处理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引导程序有一个名为center-block的内置类，它使用margin: 0 auto，但缺少float:none，你可以将它添加到CSS中，使其与网格系统一起使用。

6
投票

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

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

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

有关演示，请参阅<body class="container col-xs-offset-1 col-xs-10"> <div class="col-xs-12 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> :-)

6
投票
http://codepen.io/Kebten/pen/gpRNMe
6
投票

您可以使用<div class="container-fluid"> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> <img src="some.jpg"> </div> </div> </div> 作为行，并可以确保内部div具有text-center（不是display:inline-block）。

如：

float

和CSS：

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

小提琴：.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 }

5
投票

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

http://jsfiddle.net/DTcHh/3177/

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

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

要将内容集中在div中，请使用.centered { float: none; margin-left: auto; margin-right: auto; } ，

text-align:center

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

.centered {
    text-align: center;
}

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

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

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

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

  1. 将一列2对齐，将其偏移5
  2. 创建一个嵌套行，这样您就可以在2列中获得新的12列。
  3. 由于您希望将列居中于1，并且1是2的“一半”（我们在步骤1中居中），您现在需要在嵌套行中居中6列，这可以通过将其偏移3来轻松完成。

例如：

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

请参阅<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> ，请注意您必须增加输出窗口的大小，以便查看结果，否则列将换行。

5
投票

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

this fiddle
4
投票

We can achieve this by using the table layout mechanism:

机制是：

  1. 将所有列包装在一个div中。
  2. 将该div设为具有固定布局的表。
  3. 将每列作为表格单元格。
  4. 使用vertical-align属性控制内容位置。

示例演示是<div class="col-md-4"></div> <div class="col-md-4">Centered Content</div> <div class="col-md-4"></div>

here

4
投票

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

演示：

Enter image description here
/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
3
投票

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

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

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

<div class="container">
  <div class="row text-center">
    <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>
3
投票

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

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

可以使您的列居中。

看看justify-content: center; 。

284
投票

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

Bootstrap 3.x centering examples

对于定心元素，有一个center-block helper class。

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

但是：Kua zxsw指出

编辑 - 正如评论中所提到的，http://bootply.com/91632适用于列内容和center-block元素，但不会对列本身（display:block divs）起作用，因为Bootstrap使用col-*。

更新2018年

现在使用Bootstrap 4，中心方法已经改变了..

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

mx-auto（自动x轴边距）将使具有定义宽度的mx-auto或display:block元素居中（display:flex，%，vw等）。默认情况下，Flexbox在网格列上使用，因此还有各种flexbox居中方法。

px

对于BS4中的垂直居中，请参阅Demo Bootstrap 4 Horizontal Centering

3
投票

使用bootstrap 4，您可以简单地尝试flex，因为它被提及justify-content-md-center

here

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> </div>

2
投票

因为我从来不需要在enter image description here中只有一个.col-，所以我在目标列的包装.row上设置了以下类。

.row

例

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

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

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

如果你有5个元素，并且想在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)); } 屏幕上每行3个，那么你这样做：

md

请记住，第二个参数必须可被12整除。

2
投票

要在Bootstrap行中居中多个列 - 并且cols的数量是奇数，只需将此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"] 类添加到该行中的所有列：

css

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

.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;
}
2
投票

试试这个代码。

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

这里我使用了col-lg-1，偏移量应该是10，以便在大型设备上正确对中div。如果您需要以中型到大型设备为中心，那么只需将lg更改为md，依此类推。

2
投票

在.row或.col中附加以下代码段。这是Bootstrap 4 *。

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

Bootstrap 4解决方案：

d-flex justify-content-center
1
投票

如果将其放在行上，则内部的所有列都将居中：

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
1
投票

试试这个

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

您可以使用其他<div class="row"> <div class="col-xs-2 col-xs-offset-5"></div> </div> 以及col等。

1
投票

方法1：

col-md-2

方法2：

CSS

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

Bootstrap提示，示例和工具：.float-center{float: none;} <div class="container"> <div id="mydev" class="center-block float-center" style="width:75%;"> YOUR CONTENT </div> </div>

92
投票

现在Bootstrap 3.1.1正在使用https://stackoverflow.com/a/41464397/171456，这个帮助程序类可以与列系统一起使用。

Bootstrap 3 .center-block。

请检查Helper Class Center：

this 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
1
投票

我建议只使用类OnAirCode：

text-center
54
投票

只需将以下内容添加到自定义CSS文件中即可。不建议直接编辑Bootstrap CSS文件，并取消使用.col-center-block { float: none; display: block; margin: 0 auto; /* margin-left: auto; margin-right: auto; */ } 的能力。

CDN

为什么？

Bootstrap CSS（版本3.7及更低版本）使用margin：0 auto;，但它被size容器的float属性覆盖。

PS：

添加此类后，请不要忘记按正确的顺序设置类。

.center-block {
    float: none !important
}
39
投票

Bootstrap 3现在有一个这个<div class="col-md-6 center-block">Example</div> 的内置类

.center-block

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

35
投票

我对中心列的方法是使用.center-block { display: block; margin-left: auto; margin-right: auto; } 作为列，使用display: inline-block作为容器父级。

您只需将CSS类“居中”添加到text-align: center即可。

HTML:

row

CSS:

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

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

26
投票

http://jsfiddle.net/steyffi/ug4fzcjd/版本3有一个.text-center类。

只需添加此类：

Bootstrap

它只会加载这种风格：

text-center

例：

.text-center {
    text-align: center;
}
20
投票

使用Bootstrap v4，只需将<div class="container-fluid"> <div class="row text-center"> <div class="col-md-12"> Bootstrap 4 is coming.... </div> </div> </div> 添加到.justify-content-center .row即可实现。

<div>

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

14
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.