如何在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