如何将 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"></code>

引导程序 3 和 4：

使用“文本中心”类：

<code class="html"><div class="col-xs-1 text-center"></code>

引导程序 4：

使用弹性类：

<code class="html"><div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

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

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