如何在 Bootstrap 列中居中显示内容？

Question

我正在尝试将列的内容居中。看起来对我不起作用。这是我的 HTML：

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

JSFiddle 演示

原文由 Mark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

利用：

 <!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

代替

<div class="col-xs-1 center-block">

您还可以使用 bootstrap 3 css：

 <!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 现在有将内容居中的 flex 类：

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

请注意，默认情况下它将是 x-axis 除非 flex-direction 是 column

原文由 inertia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

[2022 年 4 月更新]： 测试并包含 5.1 版本的 Bootstrap。

---

我知道这个问题很老了。并且问题没有提到他使用的是哪个版本的 Bootstrap。所以我假设这个问题的答案已经解决了。

如果你们中的任何人（像我一样）偶然发现了这个问题并使用当前的 bootstrap 5.0 (2020) 和 4.5 (2019) 框架寻找答案，那么这里就是解决方案。

引导程序 4.5、5.0 和 5.1

在列 div 上使用 d-flex justify-content-center 。这将使该列中的所有内容居中。

 <div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

如果你想对齐 col 中的文本，只需使用 text-center

 <div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

如果列中有文本和图像，则需要使用 d-flex justify-content-center 和 text-center 。

 <div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>

原文由 Dexter 发布，翻译遵循 CC BY-SA 4.0 许可协议