ブートストラップ列内のコンテンツを中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-27 17:13:02

オリジナル

496 人が閲覧しました

How to Center Content Within Bootstrap Columns?

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

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

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 サイトの他の関連記事を参照してください。