CSS是前端開發中不可或缺的一部分，它可以幫助我們實現豐富多彩的樣式效果，其中文字和圖片的對齊也是我們經常會用到的技巧。接下來，我將通過一些示例代碼來演示如何實現文字和圖片對齊的效果，快來學習一下吧！ 一、文字與圖片垂直對齊 在開發中，有時候我們需要讓文字和圖片在垂直方向上對齊，這時我們可以使用vertical-align屬性來實現，如下所示：

p {
display: inline-block;
vertical-align: middle;
}
img {
vertical-align: middle;
}

其中，設置display: inline-block可以讓p元素和img元素都變成行內塊元素，這樣才能使用vertical-align屬性。設置vertical-align: middle可以讓文字和圖片在垂直方向上居中對齊，這是常用的一種方式。 二、文字環繞圖片 有時，我們需要讓文字環繞在圖片的周圍，這時我們可以使用float屬性來實現，示例代碼如下：

img {
float: left;
margin-right: 10px;
}
p {
overflow: hidden;
}

其中，設置float: left可以讓圖片向左浮動，margin-right: 10px可以增加圖片與文字之間的間距。設置overflow: hidden可以讓p元素包裹住浮動的圖片，不會出現圖片超出p元素的情況。 三、圖片與文字水平對齊 有時候，我們需要讓圖片和文字在水平方向上對齊，這時我們可以使用text-align屬性，如下所示：

p {
text-align: center;
}
img {
display: inline-block;
}

其中，設置text-align: center可以讓p元素中的文字居中對齊，而設置img元素為display: inline-block可以讓圖片和文字在同一行上，從而實現水平對齊的效果。 總結 通過上述示例代碼，我們可以看到，在CSS中，文字和圖片的對齊可以通過多種方式來實現。我們可以靈活運用這些技巧，讓頁面的排版更加美觀和合理。希望大家可以根據自己的實際情況，選擇適合自己的方式來進行開發。