CSS中有一種常見的需求就是讓文字和圖片在同一行顯示。這種需求在實際開發(fā)中非常常見。那么我們該如何實現(xiàn)它呢？

/* HTML部分 */
<div class="container">
<img src="image.jpg">
<p>這里是文字</p>
</div>
/* CSS部分 */
.container {
display: flex;
align-items: center;
}
.container img {
flex-shrink: 0;
margin-right: 10px;
}

上述代碼中，我們使用了flex布局來實現(xiàn)文字和圖片的一行顯示。具體實現(xiàn)方法是在容器中設(shè)置了display: flex屬性，這樣就可以讓子元素進(jìn)行彈性布局了。然后我們再通過在圖片上設(shè)置flex-shrink: 0使其保持原有尺寸大小不縮小，同時通過設(shè)置align-items: center將子元素上下居中對齊。最后設(shè)置margin-right: 10px來使文字和圖片產(chǎn)生一定的間距。

將圖片和文字垂直居中對齊的技巧很簡單，只需要添加align-items: center就可以了。當(dāng)然還有很多其他方法可以實現(xiàn)這種效果，比如使用float或者position等屬性，但是在當(dāng)前移動端和響應(yīng)式設(shè)計的趨勢下，我們更加建議使用flex布局來實現(xiàn)。