如何在 Div 容器內水平居中影像？

如何將圖像在其容器Div 內水平居中

問題：

你需要在其包含的div 元素內水平對齊影像。以下是有問題的設定的HTML 和CSS：

<div>

#thumbnailwrapper {
  ...
}

#artiststhumbnail {
  width: 120px;
  height: 108px;
  overflow: hidden;
}

解決方案：

要將圖像在其容器內水平居中，請使用以下CSS：

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

此程式碼指定影像應顯示為區塊元素，並且應具有自動邊距在所有方面。這將使圖像在其容器內水平居中。

說明：

顯示：區塊；屬性指定影像應視為區塊元素。這意味著它將佔據其容器的整個寬度，並將破壞其周圍文字的流動。

邊距：自動；屬性指定影像所有邊的邊距應設定為自動。這意味著瀏覽器將自動計算邊距，以便圖像在其容器內居中。

此解決方案可確保影像在其容器內水平居中，無論容器或影像的大小為何。

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