画像を親 Div 内で垂直方向および水平方向の中央に配置するにはどうすればよいですか?

親 Div 内の画像要素を中央に配置

画像を親 Div 内の中央に配置しようとする場合、望ましい結果は画像を親内で垂直方向の中央に配置し、その固有の高さも維持します。

解決策:

この効果を実現するには、 text-align: center; を追加することで、子の .box img div ではなく、親の .box div を作成します。この修正により、親 div 内のすべてのインライン要素が中央に配置されるようになります。

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

ログイン後にコピー

その結果、更新された CSS では、画像要素が常に親 div の中央に配置され、実際の高さが維持されることが保証されます。 .

垂直方向のギャップの問題への対処:

さらに調査した結果、中央の画像の下に 5 ピクセルのギャップが発生していることが判明しました。このギャップは、 などのインライン要素の行の高さの予約に起因します。このギャップを解消するには、vertical-align:bottom; を実行します。を画像の CSS に追加する必要があります。

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

これらの手順に従うことで、画像を親 div 内で効果的に中央に配置し、意図しない高さを維持しながら、意図しない垂直方向のギャップを排除できます。

以上が画像を親 Div 内で垂直方向および水平方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。