CSS と画像プロパティを使用して、親 Div の画像を完全に中央に配置する方法

画像を中央に配置する: 親 Div 内で画像を配置するためのガイド

HTML で画像を操作する場合、画像を水平方向に中央に配置することが望ましいことがよくあります。親の div です。これを実現するには、CSS プロパティと要素属性の両方を慎重に検討する必要があります。

CSS の使用

親 div 内の画像を中央に配置するには、テキストを追加できます。整列: 中央;親 div の CSS に宣言します。これにより、画像を含む div 内のすべてのインライン要素が配置されます。

<code class="CSS">.box {
    text-align: center;
}</code>

画像の高さと自動幅の使用

画像の高さが 100% であることを確認します。そして自動幅。これにより、アスペクト比を維持しながら、画像の高さが親 div に合わせて伸びるようになります。

<code class="CSS">.box img {
    height: 100%;
    width: auto;
}</code>

垂直方向のギャップに対処する

場合によっては、画像の下の垂直方向のギャップ。これは、 などのインライン要素に関連付けられた行の高さの予約文字が原因です。このギャップを削除するには、vertical-align:bottom; を追加します。

<code class="CSS">.box img {
    vertical-align: bottom;
}</code>

結論

CSS の配置と適切な画像サイズの組み合わせを利用することで、親 div 内の画像を効果的に中央に配置できます。この手法により、Web ページ要素に一貫性のある視覚的に魅力的なレイアウトが提供されます。

以上がCSS と画像プロパティを使用して、親 Div の画像を完全に中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。