如何在 CSS 中將圖像完美地置於 Div 中

將影像元素置中

在網頁開發中，精確對齊元素可以顯著增強視覺外觀和使用者體驗。一個常見的挑戰是將圖像置於其父 div 的中心。本文深入研究了實現精確圖片居中的 CSS 技術。

目標是定位影像，使影像的中心與父 div 的中心完美對齊。此外，我們的目標是保持圖像的完整高度。

解決方案：

為了正確對齊圖像，我們修改父 div 的 CSS，而不是改變子圖像的 CSS。透過聲明 text-align: center;對於父 div，其所有內聯元素（包括映像）都將居中。以下更新的 CSS 可實現此目的：

<code class="css">.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* Center all inline elements */
}</code>

此方法有效地使圖片水平和垂直居中。

其他注意事項：

在某些情況下，您可能會注意到影像下方有輕微的間隙。這種差距是由內聯元素的預設行高引起的，特別是在較舊的瀏覽器中。為了解決這個問題，可以將以下CSS屬性應用於映像：

<code class="css">.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* Eliminate the vertical gap */
}</code>

透過設定vertical-align：bottom;，影像將垂直定位在可用空間的底部，解決間隙

總而言之，應用text-align: center;到父div 並垂直對齊：底部；圖像元素提供了一種優雅而有效的解決方案，可以將圖像在div 中居中，同時保持其完整高度。

以上是如何在 CSS 中將圖像完美地置於 Div 中的詳細內容。更多資訊請關注PHP中文網其他相關文章！