Bootstrap 3栅格布局如何将一行中的列设置水平居中对齐呢？

4.7K 次浏览

0

在使用Bootstrap 3进行前端栅格化布局中，行中有大小为一列的元素，现需要将这一列元素居中对齐，应该如何实现呢？
布局示例代码如：

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

我来回答收藏(0) 评论编辑

2020-03-16 提问

回复 [×]

提交评论

请输入评论内容

2 个回答

0
Bootstrap实现元素的居中对齐有多种方式。

方法一：使用偏移类(offset)
Bootstrap 3 提供了offset类来将指定的元素进行水平方向上的偏移，其关键是设置一个偏移量，该偏移量等于行的剩余大小的一半。比如说，元素的列长为2(即:col-lg-2)，那么剩余的大小为10，如果要设置居中，则偏移量为(12-2)/2，具体的HTML代码如下：

注：按照以上的原理，指定元素的列宽只有为小于12的偶数才可以实现居中布局，如：.col-X-2, .col-X-4, .col-X-6, .col-X-8, .col-X-10

方法二：使用边缘属性(margin:auto)
从Bootstrap 3.0.1版本开始，内置了一个center-block类来设置元素居中，其中center-block就设置了margin: 0 auto;属性来居中元素，但需要注意的是，在Bootstrap的栅格布局中，要使用center-block还需要清除浮动，具体示例如下：

评论分享

Rector

2020-03-16 回答
0
再分享一个较为复杂的基于Bootstrap 3的居中布局示例，如下：

在单独的一行中进行水平居中对齐使用了.col-center-block类，定义如下：

布局效果如下：

评论分享

Rector

2020-03-16 回答

我来回答

提交答案