親 Div 内で画像を中央に配置するにはどうすればよいですか?

親 Div 内で画像を中央揃え

親 Div 内で画像を中央揃えに維持すると、Web サイトの美しさとユーザー エクスペリエンスが向上します。この記事では、この位置合わせを効率的に行う方法について説明します。

問題ステートメント:

画像の中心が div の中心に留まるように、親 div 内で画像を位置合わせします。

解決策:

text-align: center; を適用する代わりに、画像が幅を伸ばさずに div の高さ全体に広がるようにします。 CSS 宣言を image 要素に追加し、親の .box 要素に追加します。

.box {

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

}

このアプローチにより、画像を含め、.box div 内のすべてのインライン要素が中央に配置されていること。

追加の考慮事項:

画像の下に 5 ピクセルのギャップが表示される場合、インライン要素に関連付けられたデフォルトの行の高さに起因する可能性があります。このギャップを解消するには、vertical-align:bottom; を適用します。

.box img {

height: 100%;
width: auto;
vertical-align: bottom; // fix the vertical gap

}

これらの変更を実装すると、画像を効果的に画像の中央に配置できます。親 div を作成し、その外観が望ましいことを確認します。

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