有許多方法可以将HTML元素與CSS對齊,但是一起使用或單獨使用它們并不是那麼容易。開發人員所面臨的困難之一就是試圖将元素集中在頁面中間。
因此,在本文中,我将展示一些最常用的方法,即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。
水平居中讓我們開始使用3個不同的CSS屬性将圖像水平居中。
文字對齊使圖像水平居中的第一種方法是使用text-align屬性。但是,僅當圖像位于塊級容器(例如<div>)内時,此方法才有效:
Margin: Auto
使圖像居中的另一種方法是使用margin:auto屬性(用于左邊距和右邊距)。但是,單獨使用margin:Auto将不适用于圖像。如果需要使用margin:auto,則還必須使用2個其他屬性。
margin-auto屬性對内聯級别的元素沒有任何影響。由于<img>标簽是一個内聯元素,因此我們需要先将其轉換為塊級元素:
其次,我們還需要定義寬度。因此,左右邊緣可以占用其餘的空白空間并自動對齊,可以這樣解決問題(除非我們給出100%的寬度):
Display: flex
将圖像水平居中的第三種方法是使用display:flex。同樣,我們對容器使用text-align屬性,它也會使用display:flex。但是,僅使用display:flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。
justify-content屬性與display:flex一起使用,我們可以使用它水平放置圖像的中心。最後,圖像的寬度必須小于容器的寬度,否則,它會占用100%的空間,然後我們就無法對其進行集中化。
垂直居中放置圖像1、Display: Flex
對于垂直對齊,使用display:flex确實很有幫助。考慮到我們的容器的高度為800px,但圖像的高度僅為500px:
現在,在這種情況下,向容器中添加一行代碼(align-items:center)就可以了:
如果将align-items屬性與display:flex一起使用,就會将元素垂直放置。
2、位置:絕對和變換屬性
垂直對齊的另一種方法是一起使用position和transform屬性。這個有點複雜,所以讓我們一步一步地做。
步驟1:定義絕對位置
首先,我們将圖像的定位行為從靜态更改為絕對:
同樣,它應該位于相對放置的容器内,因此我們添加一個位置:相對于其容器的div。
步驟2:定義頂部和左側屬性
其次,我們定義圖像的頂部和左側屬性,并設置為50%。這會将圖像的起點(左上角)移到容器的中心:
步驟3:定義變換屬性
在第二步的時候已經将圖像的一部分移出容器。因此,我們需要将其取回内部。在圖像上定義轉換屬性,并在其X和Y軸上添加負50%可以達到目的:
還可以使用其他方法進行水平和垂直居中,我這裡隻嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。
,