如何在 Bootstrap 欄位中正確居中內容？

對齊 Bootstrap 欄位中的內容

使用 Bootstrap 欄位時，對齊其中的內容有時會帶來挑戰。一個常見的要求是將內容水平和垂直居中。本文介紹如何使用 Bootstrap 類別來實現此目的。

在以下 HTML 中，嘗試使用「center-block」類別將列內容居中似乎不起作用。

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

要解決此問題，請使用「align」屬性而不是「center-block」類別。

<code class="html"><!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
<p>此外，Bootstrap 3 提供了「text-center」類，Bootstrap 4 提供了「d-flex justify-content-center」類別可實現更簡潔和現代的對齊方式。 </p>
<pre class="brush:php;toolbar:false"><code class="html"><!-- recommended method -->
<div class="col-xs-1 text-center">

<!-- Bootstrap 4 -->
<div class="d-flex justify-content-center">
   <div>some content</div>
</div>
<p>請注意，Bootstrap 4 的 flex 類別預設會將內容沿 x 軸居中，除非「flex-direction 」設定為「列」。 </p>
</div></code>