使用Twitter Bootstrap将列居中-Java 学习之路

1024

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

请参阅起始fiddle .

<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 的内容按比例缩小 . 我想 empty space outside the div to be evenly distributed （缩小到容器宽度==一列） .

30 回答

Method 1:

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

Method 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

回复于 2024-04-23T14:59:40+08:00

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

回复于 2024-04-23T14:59:40+08:00

1809
使用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
回复于 2024-04-23T14:59:40+08:00
92
如果你把它放在你的行上，里面的所有列都将居中：
```
.row-centered {
    display: flex;
    justify-content: space-between;
}
```
回复于 2024-04-23T14:59:40+08:00
5
centering columns 的首选方法是使用"offsets"（即： col-md-offset-3 ）

Bootstrap 3.x centering examples

对于 centering elements ，有一个 center-block helper class .

您还可以使用 text-center 到 center text （和内联元素） .

Demo ：http://bootply.com/91632

EDIT - 如评论中所述， center-block 适用于列内容和 display:block 元素，但不适用于列本身（ col-* divs），因为Bootstrap使用 float .

更新2018年

现在使用 Bootstrap 4 ， centering 方法已更改..
- text-center 仍用于 display:inline 元素
- mx-auto 将 center-block 替换为中心 display:block 元素
- offset-* 或 mx-auto 可用于居中网格列
mx-auto （自动x轴边距）将使具有已定义宽度的 display:block 或 display:flex 元素居中（ % ， vw ， px 等...） . Flexbox is used by default 在网格列上，因此还有各种flexbox居中方法 .

Demo Bootstrap 4 Horizontal Centering

For vertical centering in BS4 see https://stackoverflow.com/a/41464397/171456
回复于 2024-04-23T14:59:40+08:00

Bootstrap版本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>

回复于 2024-04-23T14:59:40+08:00

264

我建议只使用类 text-center ：

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

回复于 2024-04-23T14:59:40+08:00

这不是我的代码，但它完美运行（在Bootstrap 3上测试），我不必乱用col-offset .

Demo:

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

回复于 2024-04-23T14:59:40+08:00

5
试试这个
```
<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>
```
您可以使用其他 col 以及 col-md-2 等 .
回复于 2024-04-23T14:59:40+08:00
25
这可能不是最好的答案，但还有一个更有创意的解决方案 . 正如koala_dev所指出的，列偏移仅适用于偶数列大小 . 但是，通过嵌套行，您也可以实现对齐不均匀的列 .

要坚持原始问题，你想在12格的网格中居中一列1 .
- 通过偏移5将列居中2
- 创建一个嵌套行，这样您就可以在2列中获得新的12列 .
- 由于您希望将列居中1，并且1是"half"的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>
```
请参阅this fiddle，请注意您必须增加输出窗口的大小，以便查看结果，否则列将换行 .
回复于 2024-04-23T14:59:40+08:00
0
您可以使用非常灵活的解决方案flexbox到您的Bootstrap .
```
justify-content: center;
```
可以使您的列居中 .

看看flex .
回复于 2024-04-23T14:59:40+08:00

因为我从来不需要在 .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>

回复于 2024-04-23T14:59:40+08:00

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

机制是：
- 将所有列包装在一个div中 .
- 将该div设为具有固定布局的表 .
- 将每列作为表格单元格 .
- 使用vertical-align属性控制内容位置 .
示例演示在这里
回复于 2024-04-23T14:59:40+08:00

要使我们需要使用以下代码 . 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;
    }
}

回复于 2024-04-23T14:59:40+08:00

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

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

回复于 2024-04-23T14:59:40+08:00

32
只需将此添加到您的自定义CSS文件中，不建议直接编辑Bootstrap CSS文件并取消使用cdn的能力 .
```
.center-block {
    float: none !important
}
```
Why?

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

PS ：添加此类后，不要忘记按正确的顺序设置类 .
```
<div class="col-md-6 center-block">Example</div>
```
回复于 2024-04-23T14:59:40+08:00

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

回复于 2024-04-23T14:59:40+08:00

只需将显示内容的一列设置为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>

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

有关演示，请参阅http://codepen.io/Kebten/pen/gpRNMe :-)

回复于 2024-04-23T14:59:40+08:00

我对中心列的方法是使用 display: inline-block 作为列，使用 text-align: center 作为容器父级 .

您只需将CSS类'centered'添加到 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/

回复于 2024-04-23T14:59:40+08:00

4
试试这个代码 .
```
<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等等，让我知道如果有任何问题 .
回复于 2024-04-23T14:59:40+08:00
3

请注意，如果您使用的是Bootstrap 4，则可以在 row 中使用 .align-items-center 作为Boostrap 4现在使用flex系统 .

回复于 2024-04-23T14:59:40+08:00
3
在Bootstrap 3中将列 <div> 居中的方法有两种：

方法1（抵消）：

第一种方法使用Bootstrap自己的偏移类，因此它不需要更改标记，也不需要额外的CSS . 关键是 set an offset equal to half of the remaining size of the row . 因此，例如，大小为2的列将通过添加5的偏移量来居中，即 (12-2)/2 .

在标记中，这看起来像：
```
<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>
```
现在，这个方法有一个明显的缺点， it only works for even column sizes ，所以只支持 .col-X-2 ， .col-X-4 ， col-X-6 ， col-X-8 和 col-X-10 .

方法2（旧边距：自动）

您可以使用经过验证的 margin: 0 auto; 技术 center any column size ，您只需要处理Bootstrap网格系统添加的浮动 . 我建议定义一个自定义CSS类，如下所示：
```
.col-centered{
    float: none;
    margin: 0 auto;
}
```
现在，您可以将其添加到任何屏幕大小的任何列大小，并且它将与Bootstrap的响应式布局无缝协作：
```
<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>
```
Note: 使用这两种技术，您可以跳过 .row 元素并使列在 .container 内居中，但由于容器类中的填充，您会注意到实际列大小的最小差异 .

Update:

从v3.0.1开始，Bootstrap有一个名为 center-block 的内置类，它使用 margin: 0 auto 但缺少 float:none . 您可以将其添加到CSS以使其与网格系统一起使用 .
回复于 2024-04-23T14:59:40+08:00
1
别忘了添加 !important . 然后你可以确定元素真的会在中心：
```
.col-centered{
  float: none !important;
  margin: 0 auto !important;
}
```
回复于 2024-04-23T14:59:40+08:00

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

回复于 2024-04-23T14:59:40+08:00

0
Bootstrap 3 现在有一个内置类 .center-block
```
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
```
如果您仍在使用2.X，则只需将其添加到CSS中即可 .
回复于 2024-04-23T14:59:40+08:00

现在Bootstrap 3.1.1正在使用 .center-block ，这个帮助程序类可以与列系统一起使用 .

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

Helper classes center

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

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

回复于 2024-04-23T14:59:40+08:00

2
这很有效 . 可能是一种hackish方式，但它很好用 . 测试了响应性（Y） .
```
.centered {
    background-color: teal;
    text-align: center;
}
```
回复于 2024-04-23T14:59:40+08:00
2
更准确地说，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

.......偏移....... . 数据 . .......不曾用过........
回复于 2024-04-23T14:59:40+08:00

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

回复于 2024-04-23T14:59:40+08:00

53
正如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>
```
回复于 2024-04-23T14:59:40+08:00

使用Twitter Bootstrap将列居中

30 回答

更新2018年

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

示例演示在这里

HTML：

CSS：

方法1（抵消）：

方法2（旧边距：自动）

相关问题