在網頁設計中，如何讓圖片和字對齊是非常重要的。使用CSS可以很容易地實現這個目標。

img {
vertical-align: middle;
}

這個CSS代碼將圖片的垂直對齊方式設置為中間。在默認情況下，圖片的默認垂直對齊方式是基線。

使用以下HTML代碼可以看到垂直對齊的變化：

<p>這是一段文字，<img src="image.png"> 這是圖片</p>
<p>這是一段文字，<img src="image.png" style="vertical-align: middle"> 這是圖片</p>

在默認情況下，圖片下方會留出一些空白。為了去掉這個間距，可以在圖片所在的元素上應用以下CSS：

p {
line-height: 1;
}

這個代碼會將行高設置為1，使得圖片和周圍的文字更加緊密地排列在一起。

另外，如果你希望在一行內更好地對齊文字和圖片，也可以使用以下CSS：

p {
display: flex;
align-items: center;
}

這個代碼會使用Flexbox布局使得文字和圖片在一行內水平居中對齊。

總的來說，通過簡單的CSS調整，我們可以很方便地實現圖片和文字之間的對齊。