在網(wǎng)頁設(shè)計當(dāng)中，我們不僅需要設(shè)置文字的樣式和排版，還需要設(shè)置圖片和文字之間的對齊方式，使得整個頁面看起來更加美觀。在這篇文章中，我們將會介紹如何使用CSS設(shè)置圖片和文字對齊。

水平對齊

img {
float: left;
margin-right: 20px;
}
p {
text-align: justify;
}

上面的代碼將圖片設(shè)置為左浮動，并在圖片右側(cè)添加20像素的空白，使得文字環(huán)繞圖片顯示。同時，文本的對齊方式設(shè)置為兩端對齊，讓整段文字看起來更加整齊。

垂直對齊

有時候我們需要把文字和圖片垂直居中對齊，可以使用以下代碼實現(xiàn)：

.container {
display: flex;
align-items: center;
}
.container img {
margin-right: 20px;
}

上面的代碼將容器設(shè)置為彈性布局，并且垂直居中對齊。圖片的右側(cè)添加20像素的空白，使得文本和圖片之間有一定的間距，看起來更加美觀。

文字在圖片上方

有些情況下，我們需要讓文字顯示在圖片的上方，可以使用以下代碼實現(xiàn)：

.container {
position: relative;
}
.container img {
display: block;
}
.container p {
position: absolute;
top: 0;
left: 0;
}

上面的代碼將容器設(shè)置為相對定位，圖片的顯示方式設(shè)置為塊狀顯示，使得圖片和文字處于不同的層級。文本使用絕對定位，設(shè)置其位置在容器的左上角，這樣就可以讓文字顯示在圖片的上方。

總結(jié)

通過上述代碼，我們可以輕松地設(shè)置圖片和文字之間的對齊方式，使得整個頁面看起來更加美觀。當(dāng)然，實際應(yīng)用當(dāng)中還會有更加細節(jié)的處理方式，希望本文能對您有所幫助。