CSS是前端開發中不可或缺的一環，在其中，樣式布局更是影響網頁美觀的重要因素。其中對圖片和文字的對齊就是一個重要的細節，如此一來網站整體視覺效果能夠得到提升。 在CSS中，我們可以通過`text-align`來對齊文字，而通過`vertical-align`來對齊圖片。其中，`text-align`屬性用于設置文本內容的對齊方式，可取值有：左對齊（left）、居中對齊（center）、右對齊（right）以及兩端對齊（justify）。 而`vertical-align`屬性用于控制垂直對齊方式，其取值有多個，包括： - `baseline`：默認值，項目放置在父元素的基線上； - `top`：將項目放置在容器的頂部； - `middle`：將項目放置在容器的中部； - `bottom`：將項目放置在容器的底部； - `text-top`：將項目放置在容器的頂部，但其高度基于當前字體的頂端； - `text-bottom`：將項目放置在容器的底部，但其高度基于當前字體的底端； - `sub`：將項目垂直對齊到文本的下標； - `super`：將項目垂直對齊到文本的上標。 下面是相應代碼示例：

p {
text-align: center;
}
img {
vertical-align: middle;
}

以上代碼表示將文本水平居中對齊，圖片垂直居中對齊，實現了圖片和文本的對齊。需注意的是，`vertical-align`屬性對于非圖片的元素設置垂直對齊會出現一些問題，因此在此僅推薦對圖片使用此屬性。 總而言之，通過合理設置`text-align`和`vertical-align`屬性，我們可以輕易地將圖片和文字對齊，令網站的視覺效果得到提升。