如何在Bootstrap列中居中内容？

Question

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

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

JSFiddle 演示

Answer 1

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

---

我知道这个问题已经很老了。而且问题没有提到他使用的是哪个版本的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>

如果你想对齐列内的文本，只需使用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>

Answer 2

用途：

<!-- 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