使用Twitter Bootstrap 3将列居中

css CSS

Tom猿

2020-03-13

如何在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之外的空白处均匀分布（缩小直到容器宽度等于一列）。

第1563篇《使用Twitter Bootstrap 3将列居中》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共25个回答

Near西门 2020.03.13

Bootstrap 4 solution:

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

米亚猴子 2020.03.13

Try this

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

You can use other col as well like col-md-2, etc.

Sam梅小胖 2020.03.13

Try this code.

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

Here I have used col-lg-1, and the offset should be 10 for properly centered the div on large devices. If you need it to center on medium-to-large devices then just change the lg to md and so on.

JinJinTom 2020.03.13

If you put this on your row, all of the columns inside will be centered:

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

猪猪小小小哥 2020.03.13

Append the following snippet inside your .row or your .col. This is for Bootstrap 4*.

d-flex justify-content-center

L木嘢 2020.03.13

I suggest simply to use the class text-center:

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

逆天L 2020.03.13

You can use the very flexible solution flexbox to your Bootstrap.

justify-content: center;

can center your column.

Check out flex.

神无达蒙JinJin 2020.03.13

Because I never have the need to center only a single .col- within a .row, I set the following class on the wrapping .row of my target columns.

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

Example

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

null 2020.03.13

This is probably not the best answer, but there is one more creative solution to this. As pointed out by koala_dev the column offsetting works only for even column sizes. However, by nesting rows you can achieve centering uneven columns as well.

To stick with the original question where you want to center a column of 1 inside a grid of 12.

Center a column of 2 by offsetting it 5
Make a nested row, so you get a new 12 columns inside your 2 columns.
Since you want to center a column of 1, and 1 is "half" of 2 (what we centered in step 1), you now need to center a column of 6 in your nested row, which is easily done by offsetting it 3.

For example:

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

See this fiddle, please note that you have to increase the size of the output window in order too see the result, otherwise the columns will wrap.

卡卡西逆天十三 2020.03.13

With bootstrap 4 you can simply try justify-content-md-center as it is mentioned 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>

卡卡西理查德 2020.03.13

To center the col- we need to use the below code. cols are floater elements besides margin auto. We will also set it to float none,

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

To center the above col-lg-1 with class of centered, we will write:

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

To center the content inside the div, use text-align:center,

.centered {
    text-align: center;
}

If you want to center it only on the desktop and larger screen, not on mobile, then use the following media query.

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

And to center the div only on mobile version, use the below code.

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

阿飞神无 2020.03.13

We can achieve this by using the table layout mechanism:

The mechanism is:

Wrap all columns in one div.
Make that div as a table with a fixed layout.
Make each column as a table cell.
Use vertical-align property to control content position.

The sample demo is here

飞云小卤蛋 2020.03.13

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

猿阳光 2020.03.13

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

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

达蒙JinJin 2020.03.13

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

达蒙逆天Pro 2020.03.13

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

Tony伽罗Sam 2020.03.13

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

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

反应灵敏

理查德猿JinJin 2020.03.13

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>

泡芙古一神无 2020.03.13

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

神无逆天GO 2020.03.13

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

樱理查德 2020.03.13

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

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

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

Tom凯飞云 2020.03.13

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

Jim老丝梅 2020.03.13

只需将以下内容添加到您的自定义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>

ItachiGreen 2020.03.13

的优选的方法为中心的列是使用“偏移”（即：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

小小 2020.03.13

有两种方法可以使<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中以使其与网格系统一起使用。

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

We can achieve this by using the table layout mechanism:

The sample demo is here

HTML：

CSS：

更新2018

方法1（偏移）：

方法2（旧margin:auto）

方法2（旧`margin:auto`）