如何使影像在 Div 內水平和垂直居中？-css教學-PHP中文網

如何使影像在 Div 內水平和垂直居中？

Mary-Kate Olsen

發布： 2024-11-24 05:57:14

原創

299 人瀏覽過

How to Center an Image Both Horizontally and Vertically Within a Div?

在 Div 中居中對齊圖像

在網頁中保持圖像的正確對齊通常會帶來挑戰。在此特定實例中，在給定 div 元素內實現影像的水平和垂直居中需要有針對性的方法。

要實現所需的對齊方式，影像必須水平放置在 div 元素的中心和垂直方向。為此，可以使用以下CSS 屬性：

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

登入後複製

以下是這些屬性如何運作的詳細說明：

margin-left: auto; margin-right: auto;：這些屬性會自動調整映像元素的左右邊距，將其推向其父容器（div 元素）的中心。
display :block;：此屬性確保影像元素的行為類似於區塊級元素，佔據其父容器的整個寬度。這可以防止影像堆疊在 div 內的其他元素之上。

使用這些 CSS 屬性後，圖片將位於 div 元素的中心和中間，為其提供所需的效果對齊。

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