ブートストラップ列のコンテンツを適切に中央に配置するにはどうすればよいですか?

ブートストラップ列のコンテンツの位置合わせ

ブートストラップ列を使用する場合、列内のコンテンツを位置合わせするときに問題が発生することがあります。一般的な要件の 1 つは、コンテンツを水平方向と垂直方向の両方で中央揃えにすることです。この記事では、Bootstrap クラスを使用してこれを実現する方法について説明します。

次の HTML では、「center-block」クラスを使用して列のコンテンツを中央に配置しようとしても機能しないようです。

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

これを解決するには、「center-block」クラスの代わりに「align」属性を使用します。

<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 クラスは、「flex-direction」を除いて、デフォルトでコンテンツを X 軸に沿って中央に配置することに注意してください。 「列」に設定されています。</p>
</div></code>