CSS中的圖片水平對齊是設計師和開發(fā)人員經(jīng)常需要處理的問題之一。如果不正確地對齊圖片，頁面將看起來不專業(yè)，影響用戶體驗。本文將介紹CSS中的幾種水平對齊方法，以及它們的適用場景。

/* 居中對齊 */
img {
display: block;
margin: 0 auto;
}

第一種方法是使用margin: 0 auto;將圖片居中對齊。

這種方法適用于只有一張圖片的情況。可以將display屬性設置為block使圖片成為塊級元素，并將左右外邊距設置為auto。

/* 左對齊 */
img {
float: left;
margin-right: 10px;
}

第二種方法是使用float: left;效果將圖片左對齊。

這種方法適用于需要在文本中插入圖片的情況。通過將圖片浮動到左側(cè)并設置右邊界外邊距，可以使圖片與文本內(nèi)容對齊。

/* 右對齊 */
img {
float: right;
margin-left: 10px;
}

第三種方法是使用float: right;效果將圖片右對齊。

這種方法適用于需要在文本中插入圖片的情況。通過將圖片浮動到右側(cè)并設置左邊界外邊距，可以使圖片與文本內(nèi)容對齊。

/* 等分對齊 */
.container {
display: flex;
justify-content: space-between;
}

第四種方法是使用flex進行等分對齊。

這種方法適用于多張圖片間需要等間距分布的情況。可以在容器元素上設置display: flex;，然后使用justify-content: space-between;屬性使子元素居中并平均分布。

在實際項目中，根據(jù)頁面具體情況選擇合適的水平對齊方案可以使頁面看起來更專業(yè)、整潔。