使用Twitter Bootstrap 3将列居中

1146

如何在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，我可能会使用一行，但是现在我只想要a div，其大小以一列为中心位于容器内（12列）。

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

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
source

Answers:

1963

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

方法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 Bootstrap具有一个名为的内置类，该类center-block使用margin: 0 auto，但缺少float:none，因此可以将其添加到CSS中以使其与网格系统一起使用。

— koala_dev
source
1
我认为在中心块规则中没有float：none，因为有一个clearfix独立规则，您可以将其添加到元素中以清除float。
— Diego Fernando Murillo Valenci 2014年
7
@DiegoFernandoMurilloValenci .clearfix在这种情况下不起作用，因为它不会删除元素上的float属性（使用时需要居中margin: 0 auto），它只是使容器将内部所有浮动元素包装起来
— koala_dev 2014年
4
不能在列上使用它，因为没有float:none;
— -airtonix
2
如果要居中更多然后在一行一列，看到这个答案stackoverflow.com/questions/28683329/...
— 康纳尔·斯文森
3
在Bootstrap4中更改了offset的语法（最新版本）。以该响应为例：类col-md-offset-5现在应为offset-md-5。
— lgants
296

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

Bootstrap 3.x居中示例

对于居中元素，有一个center-block 帮助器类。

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

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

编辑 -如注释中所述，center-block可处理列的内容和display:block元素，但不适用于列本身（col-*divs），因为Bootstrap使用float。

更新2018

现在有了Bootstrap 4，居中方法已更改。

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

mx-auto（自动x轴边距）将围绕display:block或display:flex具有一元件限定的宽度，（ ，，% 等。）。默认情况下，在网格列上使用Flexbox，因此也有多种Flexbox居中方法。vwpx

演示 Bootstrap 4水平居中

有关BS4中的垂直居中的信息，请参见 https://stackoverflow.com/a/41464397/171456

— 齐姆
source
31
不幸的是，此帮助程序类不适用于列系统，因为它无法处理float属性。例如，请参见此演示。
— koala_dev 2013年
13
那只需要一个中心块{float：none; }，并且有效。bootply.com/122268
— Matias Vad
5
不确定OP，但我来这里是寻找text-center细节-其他答案都没有。这个得到我的投票。
— domoarigato
1
不能在列上使用它，因为没有float:none;
— -airtonix
98

现在，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; */
}
— 发件人
source
float:none通过确保div中心块已style="width : ?px"应用样式，我没有添加即可工作。例如图像宽度。适用于3.2.2
— Piotr Kula 2015年
保证金：0自动; -取而代之的是左边距+右边距
— mmike '16
57

只需将以下内容添加到您的自定义CSS文件即可。不建议直接编辑Bootstrap CSS文件，这会取消您使用CDN的能力。

.center-block {
    float: none !important
}

为什么？

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

PS：

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

<div class="col-md-6 center-block">Example</div>
— 下垂的SEO
source
1
我正在使用Bootstrap 3.3.7，这是唯一适用于我的方法！
— illagrenan's
1
这可行。但认为!important没有必要
— Gianfranco P.
1
@GianfrancoP。P.您的权利，但是...这取决于装载顺序，我想提供一种简单的方法。
— Sagive SEO's
39

Bootstrap 3现在为此提供了一个内置类.center-block

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

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

— 施马尔齐
source
这可能会给您最简单的效果。如果想采用更模块化的方法，也可以将宽度放在.centered类上，或者添加第二个类
— Matt Lambert
2
添加浮点数：无；到.centered可使您将类上移到容器中。保持代码更清洁
— Adam Patterson 2014年
7
不能在列上使用它，因为没有float:none;
— airtonix
37

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

— 斯特菲
source
2
这是唯一在100％的时间内有效的答案-其他答案有效，但当引导程序切换到其移动视图（项目移至左侧）时无效。
— Levi Fuller
这是唯一对我也有效的方法。.center-block仅适用于一列，而我需要将所有列居中，而与它的数量无关。
— cjohansson
唯一适用于我的解决方案。其他浏览器仅在浏览器是窗口（而非全屏）时才起作用。
— kiwicomb123
26

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>
— RustyIngles
source
澄清将在哪里添加此类？
— aksu
@aksu，您好，您无需添加任何.css。查看提供的示例。
— JoshYates1980
15

这可行。可能是一种骇人听闻的方式，但是效果很好。已对其进行响应性测试（Y）。

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

桌面

反应灵敏

— 阿里·加贾尼（Ali Gajani）
source
仅由于该元素具有内嵌式diplay而起作用。img可以将an 设置为块。
— ProfileTwist
也许在孤立的测试案例中。我想补充.centered img { display: inline; }一下您的答案，那么就值得投票了。
— ProfileTwist
没问题。我确定OP将找到他/她的答案:)
— Ali Gajani
在引导程序3中，.text-center类在本机上做同样的事情，如我上面所学。
— domoarigato
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— 瓦利
source
6

要居中，我们需要使用以下代码。cols是margin以外的浮动元素。我们还将其设置为不浮动，

<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;
    }
}
— 阿默·沙扎德
source
6

只需将显示内容的一列设置为col-xs-12（移动设备优先;-），并配置容器即可控制您希望居中内容的宽度，因此：

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

— 基兰·瑞安（Kieran Ryan）
source
6

偏移的另一种方法是具有两个空行，例如：

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— 勒罗伊
source
1
2个无用的div，col-md-
— offset-
1
我同意。我使用了该方法，因为它实际上运行良好并经过了测试。
— LeRoy
6

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

— 阿里雷扎·法塔希（Alireza Fattahi）
source
6

使用Bootstrap 4，您可以justify-content-md-center按照此处所述轻松尝试

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

在此处输入图片说明

— 侯赛因·纳里马尼·拉德
source
1
@AdamErickson这个问题专门要求引导3解决方案。由于这个答案可能是在BS4的路要走，在2019年一些软件仍然采用自举3
— A1rPun
5

这可能不是最佳答案，但是对此还有另一种创造性的解决方案。正如koala_dev所指出的，列偏移仅适用于偶数列大小。但是，通过嵌套行，您也可以使不均匀的列居中。

坚持原来的问题，您想在1的网格内以1为中心居中。

  1. 通过偏移5将2列居中
  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>

请参见此小提琴，请注意，您必须增加输出窗口的大小才能看到结果，否则列将自动换行。

— inder
source
5

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

演示：

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<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>
展开摘要

— Binar Web
source
4

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

该机制是：

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

示例演示在这里

在此处输入图片说明

— 莫汉德雷
source
3

正如koala_dev在他的方法1中所使用的那样，我宁愿使用offset方法而不是使用中心块或边距的方法（它们使用率有限），但是正如他提到的那样：

现在，此方法有一个明显的缺点，它仅适用于偶数列大小，因此仅.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>
— 阿比纳夫·辛格（Abhinav Singh）
source
3

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

justify-content: center;

可以使您的专栏居中。

查看flex。

— 苛刻
source
2

因为我从来都需要中心只有一个.col-内部的.row，我设置在包装下面的类.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>
— 沃尔特·罗曼（Walter Roman）
source
2

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

— jsgoupil
source
2

要使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>
— 鲁托·柯林斯（Ruto Collins）
source
2

尝试这个

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

您可以使用其他col，例如col-md-2，等等。

— 乌马尔·贾米尔
source
2

试试这个代码。

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

在这里，我使用了col-lg-1，为了使div在大型设备上正确居中，偏移量应为10。如果您需要将其集中在大中型设备上，则只需将lg更改为md等。

— 邦加什
source
2

Bootstrap 4解决方案：

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— 扬·布鲁斯
source
1

为了更加精确，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

.......偏移量.....数据 .......未使用........

— 科技类
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.