如何在父 Div 中垂直和水平居中放置影像？

在父div 中居中圖像元素

當尋求將圖像定位在其父div 中央時，期望的結果是圖像在父級中保持垂直居中，同時保持其固有高度。

解決方案：

要實現此效果，請修改父.box div，而不是子.box img div，透過新增text-align: center; 。此修改可確保父 div 內的所有內聯元素居中對齊。

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

因此，更新的CSS 保證圖像元素始終位於其父div 的中心，保持其實際高度.

解決垂直間隙問題：

經過進一步檢查，發現居中影像下方出現了5px 的間隙。此間隙可歸因於 等內聯元素的行高預留。若要消除這種間隙，請使用vertical-align：bottom;應將其新增至圖片的 CSS 中。

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

透過執行以下步驟，您可以有效地將影像在父 div 內居中，保持其預期高度，同時消除任何意外的垂直間隙。

以上是如何在父 Div 中垂直和水平居中放置影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！