css - bootstrap样式查询 - 使用Twitter Bootstrap 3中心列




col md 9 (19)

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

机制是 -

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

示例演示在here

如何在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的内容按比例缩小。 我想在div外部空白空间以均匀分布 (收缩直到容器宽度==一列)。


引导版本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>   

方法1:

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

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


不要忘记添加!important 。 那么你可以确定这个元素真的会在中心:

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

你可以使用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/ : http://jsfiddle.net/DTcHh/3177/


只需将它添加到您的自定义CSS文件中,不建议直接编辑Bootstrap CSS文件,并可以使用cdn进行处理。

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

因为我从来没有必要只将一个.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>

在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-4col-X-6col-X-8col-X-10支持。

方法2(旧边距:自动)

您可以使用已证明的margin: 0 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,使其与网格系统一起工作。


进行居中的首选方法是使用“偏移”(即: col-md-offset-3

Bootstrap 3.x居中示例

为了居中元素 ,有一个center-block 助手类

您还可以使用text-center居中文本 (和内联元素)。

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

编辑 - 正如评论中所提到的, center-block处理列内容和display:block元素,但不能在列本身( col-* divs)上工作,因为Bootstrap使用float

2018年更新

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

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

mx-auto (自动x轴边距)将居中display:blockdisplay:flex具有定义宽度的 display:flex元素( %vwpx等)。 Flexbox在网格列上默认使用 ,因此还有各种Flexbox居中方法。

演示 Bootstrap 4水平居中

有关BS4中的垂直居中,请参阅 https://.com/a/41464397/171456


对于那些希望在屏幕上显示列元素的中心,如果没有确切的数字来填充网格,我写了一小段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除。



我建议的只是使用类文本中心

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

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

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

更精确的引导程序的网格系统包含12列,以任何内容为中心可以说,例如内容占用1列。 一个需要占用引导网格的2列,并将内容放置在2个占用列的一半上。

<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

.......抵消.......数据。 .......不曾用过........


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

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

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

要坚持原来的问题,你想在12的网格中心的1列。

  1. 居中填补2的一列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>

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


这工作。 可能是一种骇人的方式,但它很好用。 它被测试了响应(Y)。

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


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




centering