如何在 Bootstrap 列中正确居中内容？

对齐 Bootstrap 列中的内容

使用 Bootstrap 列时，对齐其中的内容有时会带来挑战。一种常见的要求是将内容水平和垂直居中。本文介绍了如何使用 Bootstrap 类来实现此目的。

在以下 HTML 中，尝试使用“center-block”类将列内容居中似乎不起作用。

<code class="html"><div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
</div></code>

要解决此问题，请使用“align”属性而不是“center-block”类。

<code class="html"><!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
<p>此外，Bootstrap 3 提供了“text-center”类，Bootstrap 4 提供了“d-flex justify-content-center”类可实现更简洁和现代的对齐方式。</p>
<pre class="brush:php;toolbar:false"><code class="html"><!-- recommended method -->
<div class="col-xs-1 text-center">

<!-- Bootstrap 4 -->
<div class="d-flex justify-content-center">
   <div>some content</div>
</div>
<p>请注意，Bootstrap 4 的 flex 类默认会将内容沿 x 轴居中，除非“flex-direction ”设置为“列”。</p>
</div></code>