在 Bootstrap 中将内容放在列的中心

我需要帮助来解决这个问题，我需要在 bootstrap4的列中心的内容，请找到我的代码如下

<div class="container">
<div class="row justify-content-center">
<div class="col-3">
<div class="nauk-info-connections">
</div>
</div>
</div>
243093 次浏览
小开

Bootstrap 5 (update 2021)

由于柔性箱仍然使用中心的方法在 Bootstrap 5工作同样的方式。可以使用偏移量、自动页边距或调整内容中心来居中显示列。

自举5种定心方法的演示

引导程序4(原始答案)

有多个 Bootstrap 4中的水平居中方法..。

  • 中心 display:inline元素的 text-center
  • offset-*或 mx-auto可用于 center column(col-*)
  • 或，row上的 justify-content-center到 中心柱(col-*)
  • mx-auto用于将 display:block元素集中在 d-flex内

mx-auto(自动 x 轴边距)将居中具有定义宽度(% 、 vw、 px 等)的 display:block或 display:flex元素.Flexbox 默认用于网格列，因此也有各种不同的 Flexbox 居中方法。

Bootstrap 4定心方法演示

在您的示例中，使用 mx-auto将 col-3居中，使用 text-center将其内容居中。

<div class="row">
<div class="col-3 mx-auto">
<div class="text-center">
center
</div>
</div>
</div>

https://codeply.com/go/GRUfnxl3Ol

或者， 在 Flexbox 元件(.row)上使用 justify-content-center:

<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
center
</div>
</div>
</div>

Also see:
自举中的垂直对齐中心

小开

将类 text-center添加到您的列中:

<div class="col text-center">
I am centered
</div>
小开 
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
Center text goes here
</div>
</div>
</div>

我使用的是 justify-content-center类，而不是 this answer中的 mx-auto类。

检查 https://jsfiddle.net/sarfarazk/4fsp4ywh/

小开 

<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
CenterContent
</div>
</div>
</div>

按照我们的需要为列启用‘ flex’并使用调整-内容中心

小开 

.row>.col, .row>[class^=col-] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col col-lg-2">
1 of 2
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>

小开

2020年: 类似事件

如果您的 内容是一个需要在页面上居中的 set of buttons，那么将它们包装在 划船中并使用 证明-内容-中心。

下面的示例代码:

<div class="row justify-content-center">


<button>Action A</button>
<button>Action B</button>
<button>Action C</button>


</div>
小开

很简单的答案在 bootstrap 4，改变这一点

<row>
...
</row>

这个

<row class="justify-content-center">
...
</row>

提交答案