CSS の Div 内で画像を完全に中央に配置する方法

画像要素の中央揃え

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