CSS是一種十分重要的前端技術，它可以讓我們對網頁進行復雜的布局和美化。在網頁開發中，文字和圖片的排版一直都是一個比較重要的問題。如何讓文字和圖片之間實現合理的對齊呢？下面是一些CSS文字對齊圖片的代碼示例：

.img-left {
float: left;
margin-right: 20px;
}
.img-right {
float: right;
margin-left: 20px;
}
.img-box {
display: flex;
align-items: center;
}
.text-over-img {
display: inline-block;
position: relative;
}
.text-over-img img {
display: block;
}
.text-over-img span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 5px;
}

以上代碼分別實現了不同的文字對齊圖片的效果。其中，.img-left和.img-right使用了float屬性，將圖片向左或向右浮動，并通過margin屬性控制文字與圖片之間的距離。 .img-box則采用了flex布局，通過同時設置align-items屬性使圖片與文字水平居中對齊。

最后，.text-over-img實現了文字覆蓋在圖片上的效果。通過將img和span同屬于一個div中，可以將文字放到圖片上面，而通過設置span的絕對定位樣式，并設置背景色等屬性實現懸浮的效果。

以上介紹了常用的CSS文字對齊圖片的代碼示例，通過靈活運用這些代碼，我們可以在網頁布局中輕松實現理想的效果。