如何将 Bootstrap 列中的内容居中？

将内容在 Bootstrap 列中居中

您在将内容在 Bootstrap 列中居中时遇到困难。您提供的 HTML 包括以下内容：

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

解决方案：

问题在于“center-block”类的使用。当前版本的 Bootstrap 不再支持此类。相反，您应该使用以下方法之一：

Bootstrap 3 之前：

使用“align”属性：

<code class="html"><div class="col-xs-1" align="center">
<p><strong>引导程序 3 和 4：</strong></p>
<p>使用“文本中心”类：</p>
<pre class="brush:php;toolbar:false"><code class="html"><div class="col-xs-1 text-center">
<p><strong>引导程序 4：</strong></p>
<p>使用弹性类：</p>
<pre class="brush:php;toolbar:false"><code class="html"><div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

注意： Bootstrap 4 默认情况下水平对齐内容。对于垂直对齐，请在父元素上使用“flex-direction：column”。