如何将 Bootstrap 列中的内容居中？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-10-27 17:13:02

原创

497 人浏览过

How to Center Content Within Bootstrap Columns?

在 Bootstrap 列中居中内容

在 Bootstrap 中，可以通过多种方法实现在列中居中内容。

一常见的方法是在列 div 中使用align=“center”属性。例如：

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

登录后复制

但是，HTML5 并不完全支持这种方法。相反，Bootstrap 3 提供了一个专用的文本中心类，可以应用于列：

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

登录后复制

对于 Bootstrap 4，flex 类提供了更现代、更高效的居中内容解决方案：

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

登录后复制

此方法默认将内容沿 x 轴居中，除非将 flex-direction 属性设置为沿 y 轴居中的列。

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