如何使圖像在父 Div 中居中？

在父 div 中居中放置圖像

在父 div 中保持居中對齊的圖像可以增強網站美觀和用戶體驗。本文討論如何有效地實現這種對齊。

問題陳述：

在父div 內對齊影像，使其中心保持在div 的中心，確保影像跨越div 的整個高度而不拉伸其寬度。

解決方案：

而不是應用 text-align: center;對圖像元素進行 CSS 聲明，將其添加到父 .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中文網其他相關文章！