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

将内容在 Bootstrap 列中居中

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

<code class="html">&lt;div class=&quot;row&quot;&gt;
   &lt;div class=&quot;col-xs-1 center-block&quot;&gt;
       &lt;span&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/span&gt;
   &lt;/div&gt;
&lt;/div&gt;</code>

解决方案：

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

Bootstrap 3 之前：

使用“align”属性：

<code class="html">&lt;div class=&quot;col-xs-1&quot; align=&quot;center&quot;&gt;</code>

引导程序 3 和 4：

使用“文本中心”类：

<code class="html">&lt;div class=&quot;col-xs-1 text-center&quot;&gt;</code>

引导程序 4：

使用弹性类：

<code class="html">&lt;div class=&quot;d-flex justify-content-center&quot;&gt;
   &lt;div&gt;some content&lt;/div&gt;
&lt;/div&gt;</code>

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

以上是如何将 Bootstrap 列中的内容居中？的详细内容。更多信息请关注PHP中文网其他相关文章！