在CSS中，您可以使用vertical-align屬性來控制圖片和文字在一行中的顯示方式，默認(rèn)情況下，圖片和文字可能會分開顯示，但通過設(shè)置vertical-align屬性，您可以使其在一行中緊密排列。

以下是一些示例代碼，展示如何將圖片和文字顯示在一行中：

示例1: 使用vertical-align屬性

<div style="vertical-align: middle;">
    <img src="image.jpg" style="vertical-align: middle;">
    <span style="vertical-align: middle;">這是一段文字</span>
</div>

示例2: 使用flex布局

另一種方法是使用CSS的flex布局，通過創(chuàng)建一個flex容器，您可以輕松地將圖片和文字排列在一行中。

<div style="display: flex; align-items: center;">
    <img src="image.jpg">
    <span>這是一段文字</span>
</div>

示例3: 使用grid布局

CSS的grid布局也是一個很好的選擇，它提供了更靈活的布局選項(xiàng)。

<div style="display: grid; align-items: center;">
    <img src="image.jpg">
    <span>這是一段文字</span>
</div>

示例4: 使用inline-block

將圖片和文字的容器設(shè)置為inline-block，也可以實(shí)現(xiàn)一行顯示的效果。

<div style="display: inline-block;">
    <img src="image.jpg" style="vertical-align: middle;">
    <span style="vertical-align: middle;">這是一段文字</span>
</div>

通過這些方法，您可以靈活地在CSS中控制圖片和文字在一行中的顯示方式，選擇***適合您需求的方法，可以確保內(nèi)容在視覺上更加吸引人。