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

ブートストラップ列内のコンテンツの中央揃え

ブートストラップでは、列内のコンテンツの中央揃えはさまざまな方法で実現できます。

1一般的なアプローチは、列 div 内で align="center" 属性を使用することです。例:

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

ただし、このメソッドは HTML5 では完全にはサポートされていません。代わりに、Bootstrap 3 は、列に適用できる専用の text-center クラスを提供します:

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

Bootstrap 4 の場合、フレックス クラスは、コンテンツを中央揃えするためのより現代的で効率的なソリューションを提供します:

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

flex-direction プロパティが y 軸に沿って中央揃えに列に設定されていない限り、このメソッドはデフォルトでコンテンツを x 軸に沿って中央に配置します。

以上がブートストラップ列内のコンテンツを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。