CSS中的圖片對齊，是我們在網頁設計中必須掌握的知識。不同的對齊方式可以有效的改變圖片與其他元素的布局，提高網頁的美觀度和用戶體驗。下面我們來具體了解一下常用的圖片對齊方式。 ### 水平對齊 我們可以使用 `text-align` 屬性來實現水平對齊。通常情況下，圖片會與其他文本并排顯示。如果我們希望將圖片居中對齊，可以如下設置： ```css p img { display: block; margin: 0 auto; } ``` 上述代碼將圖片設置為塊級元素，并通過 `margin: 0 auto` 來使其在父容器中水平居中。 如果我們希望圖片和文本對齊，可以將圖片設置為 `inline-block` 元素并設置 `vertical-align` 屬性： ```css p img { display: inline-block; vertical-align: middle; } ``` 上述代碼可以讓圖片與文本垂直對齊。 ### 垂直對齊 對于多個圖片之間的垂直對齊，可以使用 `position` 和 `transform` 屬性。 ```css .container { position: relative; } img:first-child { position: absolute; top: 0; transform: translateY(-50%); } img:last-child { position: absolute; bottom: 0; transform: translateY(50%); } ``` 上述代碼將第一張圖片頂部與容器頂部對齊，最后一張圖片底部與容器底部對齊，中間的圖片通過 `transform` 屬性實現垂直居中。 ### 圖片大小自適應 通常情況下，圖片的大小和比例會與網頁的布局不匹配。這時候我們可以使用 `max-width` 和 `max-height` 屬性來實現圖片的自適應大小。例如： ```css img { max-width: 100%; max-height: 100%; } ``` 上述代碼可以讓圖片的大小在超出父容器的情況下自適應縮小，保證圖片和網頁布局的適配性。 總結來說，圖片對齊是網頁設計中非常重要的一個方面。我們可以使用不同的對齊方式來改變圖片和其他元素的布局，以實現更好的網頁效果和用戶體驗。