如何使用 CSS 垂直对齐图像旁边的文本？

当在网站中使用图像和文本并排显示时，经常会遇到垂直对齐的问题。本篇文章将介绍如何使用 CSS 实现垂直对齐图像旁边的文本。

HTML 代码

首先，我们需要一个包含图像和文本的 HTML 文件。以下是一个基本的示例：

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
  <p>这是一段文本。</p>
</div>

在此示例中，我们有一个包含图像和文本的容器元素 <div>，其中包含一个 <img> 元素和一个 <p> 元素。

CSS 代码

要垂直对齐图像和文本，我们可以使用 CSS 的 vertical-align 属性。如果要将图像与文本基线对齐，我们可以使用以下 CSS 代码：

.image-container img {
  vertical-align: baseline;
}
.image-container p {
  vertical-align: baseline;
}

如果要将图像与文本中心对齐，我们可以使用以下 CSS 代码：

.image-container img {
  vertical-align: middle;
}
.image-container p {
  vertical-align: middle;
}

如果要将图像与文本顶部对齐，我们可以使用以下 CSS 代码：

.image-container img {
  vertical-align: top;
}
.image-container p {
  vertical-align: top;
}

如果要将图像与文本底部对齐，我们可以使用以下 CSS 代码：

.image-container img {
  vertical-align: bottom;
}
.image-container p {
  vertical-align: bottom;
}

完整代码

以下是完整的 HTML 和 CSS 代码：

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
  <p>这是一段文本。</p>
</div>

.image-container img {
  vertical-align: middle;
}
.image-container p {
  vertical-align: middle;
}

结论

以上是使用 CSS 垂直对齐图像旁边的文本的简单示例。您可以根据需要调整 CSS 属性，并在图像和文本周围添加其他样式以自定义外观。