Web 開発では、要素を正確に配置すると、見た目とユーザー エクスペリエンスが大幅に向上します。よくある課題の 1 つは、画像を親 div 内の中央に配置することです。この記事では、画像の正確なセンタリングを可能にする CSS テクニックについて詳しく説明します。
目標は、画像の中心が親 div の中心と完全に揃うように画像を配置することです。さらに、画像の高さを完全に維持することを目指しています。
画像を正しく配置するには、親 div の CSS を変更するのではなく、変更します。子画像のCSS。 text-align: center; を宣言することで、親 div の場合、画像を含むすべてのインライン要素が中央に配置されます。次の更新された CSS はこれを実現します:
<code class="css">.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; text-align: center; /* Center all inline elements */ }</code>
このメソッドは、画像を水平方向と垂直方向の両方で効果的に中央に配置します。
場合によっては、画像の下にわずかな隙間があることに気づく場合があります。このギャップは、特に古いブラウザで、インライン要素のデフォルトの行の高さによって発生します。これに対処するには、次の CSS プロパティを画像に適用できます:
<code class="css">.box img { height: 100%; width: auto; vertical-align: bottom; /* Eliminate the vertical gap */ }</code>
vertical-align:bottom; を設定すると、画像は利用可能なスペースの下部に垂直に配置され、ギャップが解決されます。
結論として、text-align: center; を適用すると、親 div に追加し、vertical-align:bottom; image 要素に追加すると、画像を完全な高さを維持しながら div 内の中央に配置するためのエレガントで効果的なソリューションが提供されます。
以上がCSS の Div 内で画像を完全に中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。