CSS中圖片和文字怎么并排顯示

在CSS中，圖片和文字可以很容易地并排顯示，你只需要將圖片作為背景圖像應(yīng)用到元素上，然后將文本作為前景內(nèi)容放置在該元素中，這樣，圖片和文字就可以在同一行中顯示。

以下是一個(gè)簡(jiǎn)單的示例，展示如何將圖片和文字并排顯示：

HTML代碼：

<div class="image-text-container">
  <img src="image.jpg" alt="圖片">
  <p>這是一段文字</p>
</div>

CSS代碼：

.image-text-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.image-text-container img {
  width: 200px;
  height: 200px;
}
.image-text-container p {
  margin-left: 20px;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為image-text-container的容器，該容器使用display: flex;屬性來(lái)實(shí)現(xiàn)圖片和文字的并排顯示。align-items: center;屬性將圖片和文字垂直居中，而justify-content: flex-start;屬性則將它們水平對(duì)齊到容器的左側(cè)。

我們?yōu)閳D片設(shè)置了寬度和高度，以確保其在容器中正確顯示，我們還為文本設(shè)置了一些樣式，如字體大小和顏色等，以便更好地與圖片配合。

我們?yōu)槿萜魈砑恿艘恍邮?，如背景顏色和邊框等，以增?qiáng)其視覺(jué)效果，但請(qǐng)注意，這些樣式可以根據(jù)你的具體需求進(jìn)行調(diào)整。