ブートストラップの写真を中心にする方法は何ですか

ブートストラップに画像を中心にする方法には、次のものが含まれます。FlexBox：親要素を使用すると、d-flexを設定し、justify-content-centerを水平に中央に設定し、項目中心に垂直に中央に集中します。グリッドレイアウトを使用します。親要素にDグリッドと高さを設定し、内部DIVにP-2を設定して画像にマージンを追加します。絶対的な位置付けとマージン：画像設定位置：絶対、マージンを使用して位置を調整し、変換：変換（-50％、-50％）を翻訳して画像の中心点を親要素に移動します

中央のブートストラップ画像：複数のポーズ

ブートストラップの写真は中央にあり、シンプルに聞こえますが、実際にはCSSの「面白い」を体験できます。多くの初心者はそれが非常にシンプルであると感じます。 text-centerを使用してそれを完了するだけですが、実際、これは多くの方法の1つにすぎず、常に最も適切な方法ではありません。この記事の目的は、ブートストラップの写真を中心にするさまざまな方法とその背後にある原則を深く理解して、単純な表面現象に混乱しないようにすることです。読んだ後、さまざまなシナリオに従って最適なソリューションを選択し、エレガントで効率的なコードを書くことができます。

基本から始めましょう。 BootstrapはFlexBoxとGrid Systemsを使用してレイアウトを使用しており、画像のセンターは、基本的にこれらのシステムを使用して要素の位置を制御します。これを理解することが重要であり、多くの不必要なトラブルを回避するのに役立ちます。

最も一般的でエラーが発生しやすいtext-centerから始めましょう。 text-center 、テキストコンテンツを水平にのみ中心にすることができます。写真の場合、効果は画像のdisplay属性に依存します。画像がインライン要素である場合、水平に中心になりますが、垂直には所定の位置に残ります。したがって、 text-center通常、画像を中心にするのに十分ではありません。

それでは、どのようにして、写真の水平および垂直の中心を本当に実現できますか？多くの方法があります。一般的に使用されるいくつかの方法を見てみましょう。

方法1：FlexBoxを使用します

これは私の最も推奨される方法で、シンプルで効率的です。親要素をd-flexに設定し、 justify-content-center （Horizo​​ntal Center）とalign-items-center （垂直中心）に設定します。コードは次のとおりです。

 <code class="html"><div class="d-flex justify-content-center align-items-center" style="height: 200px;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"> </div></code>

ここでheight: 200px;親要素の高さを設定します。これは重要です。そうでなければ、垂直センターは有効になりません。 FlexBoxは正しく動作するために明確な高さが必要であることを忘れないでください。この方法の利点は、コードがシンプルで理解し、維持できることです。欠点は、親要素の高さを事前に知る必要があることです。

方法2：グリッドレイアウトを使用します

レイアウト自体がグリッドを使用している場合、グリッドを使用して写真を中心にすることも良い選択です。 FlexBoxと同様に、親要素のプロパティを設定する必要があります。

 <code class="html"><div class="d-grid gap-2" style="height: 200px;"> <div class="p-2"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"> </div> </div></code>

ここで、 d-gridグリッドレイアウトを有効にし、 gap-2はセル間隔を設定し、 p-2画像に内側のマージンを追加します。同様に、親要素の高さも重要です。グリッドレイアウトはFlexBoxよりも強力であり、より複雑なレイアウトシナリオに適しています。

方法3：絶対的な位置決めとマージン

これは比較的古い学校の方法ですが、時々非常に便利です。画像を絶対的な位置に設定し、 marginを使用して位置を調整する必要があります。

 <code class="html"><div style="position: relative; height: 200px;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Your Image"   style="max-width:90%"> </div></code>

親要素はposition: relativeで、画像は絶対的な位置に設定されます。 transform: translate(-50%, -50%)画像の中心点を親要素の中心点に移動します。この方法は比較的柔軟性がありますが、コードは比較的複雑であり、絶対的な位置決めを理解し、プロパティtransform必要があります。

よくある質問とピット

一貫性のない画像サイズは、不十分なセンターリング効果をもたらします。画像サイズが修正されていない場合は、 max-width: 100%;またはwidth: auto; height: auto;画像サイズを制御し、中心効果を確保します。

親要素の高さは未定義です。 FlexBoxとグリッドのレイアウトの両方で、親要素が正しく動作するために明確な高さを持つ必要があります。そうしないと、垂直センターは失敗します。

プロジェクトに適した方法を選択してください。いわゆる「ベストプラクティス」を盲目的に追求しないでください。また、実際の条件に基づいて最も適切な方法を選択してください。 FlexBoxは通常、最初の選択で、シンプルで効率的です。プロジェクトがすでにグリッドを使用している場合、グリッドの使用も悪くありません。絶対的な位置決め方法は柔軟ですが、コードは比較的複雑で、メンテナンスコストは高くなります。

最後に、コードの読みやすさと保守性も同様に重要であることを忘れないでください。簡潔でわかりやすい方法を選択し、コードを理解し、維持しやすくするために良いコメントを書いてください。いわゆる「スキル」を追求して、コードの読みやすさを犠牲にしないでください。これは大きな雄牛になる本当の方法です。

以上がブートストラップの写真を中心にする方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。