Bootstrapのヘルパークラスを使用して中央に使用する方法

ブートストラップヘルパークラスを使用して、水平および垂直にコンテンツを介してコンテンツを中心にしています。包括的なガイド

この記事では、ブートストラップのヘルパークラスを使用して、さまざまなスクリーンサイズにわたって水平および垂直の両方でコンテンツを中心に使用することに関する一般的な質問に対処しています。水平、垂直、またはその両方が必要かどうか。 水平センタリングの場合、最も簡単なアプローチには、

クラスの使用が含まれます。このクラスは、親コンテナ内のインラインコンテンツ（テキスト、画像など）を中心にします。 ただし、ディスプレイプロパティを

または

に設定するインライン要素または要素に対してのみ機能します。 要素がブロックレベルの要素（A

のように）である場合、要素内に

コンテンツ.text-centerを中心にしますが、要素自体は引き続き親の全幅を取り上げます。 たとえば、inline-blockinline<div>このコードは、コンテナの幅の50％です。 <em>を固定幅（例：</em>）に置き換えると、その特定の幅のdivが中央にあります。 クラスはレスポンシブコンテナを提供し、さまざまな画面サイズにわたって適切なサイジングを確保します。 幅を指定せずに、<p>単独ではブロックレベルの要素を中心にしません。正しく動作するためには定義された幅が必要です。<strap>.mx-auto</strap></p>ブートストラップクラスのみを垂直的にセンタリングするコンテンツは、水平センタリングよりも難しい場合があります。 これを直接達成するクラスは1つもありません。 最良のアプローチはしばしばコンテキストに依存します。<pre class='brush:php;toolbar:false;'>&lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;mx-auto&quot; style=&quot;width: 50%;&quot;&gt; This div is horizontally centered. &lt;/div&gt; &lt;/div&gt;</pre> <p> <code><div> <code>50%200pxコンテナ内のシングルラインテキストまたはインライン要素の場合：.containerクラスは、フレックスボックスコンテナに適用される場合、その内容を垂直に中心に集中できます。 フレックスボックスの動作を有効にするために、親コンテナに.mx-autoおよびを追加することを忘れないでください：

クラスでは、親コンテナが利用可能な高さを占めることを保証します。ブロックレベルの要素の場合は、
• ： FlexBoxの使用は依然として最も効率的な方法です。 上記の例は、単に<span></span>または他のブロックレベルの要素に置き換えるだけでブロックレベルの要素に適合させることができます。<div> <li><strong>複雑なレイアウトの場合：グリッドシステムまたはより高度なCSSテクニックを使用することを検討してください。センターリング</strong></li>Bootstrapは、それぞれがそのユースケースを備えたいくつかのクラスを提供しています：<h3></h3> <p> </p> <ul>：<li>センターインラインコンテンツ。 短いテキストまたはインライン要素に最適です。<strong><code>.text-center
：
• は、左右のマージンをに設定することにより、ブロックレベルの要素を水平方向に中心にします。 要素が正しく動作するために定義された幅が必要です。.mx-auto auto
：
• FlexBoxコンテナ内のコンテンツを水平に中心にします。 より複雑なレイアウトのためのより汎用性の高いオプション。.d-flex justify-content-centerクラスの選択は、要素タイプ（インライン対ブロックレベル）とレイアウトの複雑さに依存します。デザイン：

コンテキストの依存関係：

一部のクラスの有効性（

など）は、コンテキスト（例えば、親コンテナの寸法、要素の幅）に依存します。 幅を調整するか、メディアクエリを使用して、さまざまな画面サイズにわたってセンタリングの動作を微調整する必要がある場合があります。

• 複雑さ：複数の要素またはネストされたコンテナを含む複雑なレイアウトの場合、単純なヘルパークラスでは十分ではありません。 クラスを組み合わせたり、FlexBoxまたはグリッドを直接使用したり、カスタムCSSを作成したりする必要がある場合があります。.mx-auto
• 垂直センタリングの課題：垂直センタリングコンテンツには、より多くの努力が必要であり、1つのクラスではなくFlexBoxまたはその他のレイアウト技術を使用することがよくあります。また、FlexBoxのような他のレイアウト技術と組み合わせてそれらを使用することは、レスポンシブでよく構造化されたWebページを作成するために重要です。