本文目錄導(dǎo)讀：

1. 圖片與文字的對齊
2. 圖片與圖片的對齊
3. 圖片居中顯示

CSS圖片對齊技巧

在網(wǎng)頁設(shè)計中，圖片的對齊是一個重要的環(huán)節(jié)，它直接影響到網(wǎng)頁的美觀度和用戶體驗，CSS（層疊樣式表）是一種用于描述HTML文檔樣式的語言，它可以輕松地實現(xiàn)對圖片的對齊。

圖片與文字的對齊

在CSS中，我們可以使用vertical-align屬性來實現(xiàn)圖片與文字的對齊，如果你想讓圖片與文字在頂部對齊，你可以這樣寫：

img {
    vertical-align: top;
}

如果你想讓圖片與文字在底部對齊，你可以這樣寫：

img {
    vertical-align: bottom;
}

圖片與圖片的對齊

對于圖片與圖片之間的對齊，我們可以使用float屬性來實現(xiàn)，如果你想讓***張圖片在第二張圖片的左邊，你可以這樣寫：

img:first-child {
    float: left;
}

如果你想讓***張圖片在第二張圖片的右邊，你可以這樣寫：

img:first-child {
    float: right;
}

圖片居中顯示

如果你想讓圖片居中顯示，你可以使用margin屬性來實現(xiàn)。

img {
    margin: 0 auto;
}

上述代碼將圖片水平居中顯示，如果你也想讓圖片垂直居中顯示，你可以這樣寫：

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

這段代碼將圖片在父元素中垂直和水平居中顯示。