css 图片 多行文字对齐

在网页中，我们常常需要在文字中插入图片来丰富页面内容。然而，当图片与多行文字排列时，如何实现文字与图片的对齐就成了一个问题。这时，CSS就能发挥它的作用了。 我们可以使用CSS中的vertical-align属性来对齐多行文字和图片。先看一个例子：

<div class="container">
  <img src="example.jpg">
  <p>这是一段多行的文本，看看它和图片对齐不对</p>
</div>

下面是对该例子进行样式设置的CSS代码：

.container {
  display: inline-block;
  vertical-align: middle;
}

img {
  vertical-align: middle;
}

p {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

在这个例子中，我们使用了display: inline-block来使图片和文字处于同一行，并使用vertical-align: middle实现垂直居中对齐，同时也将段落设置为inline-block并改变了margin值来避免出现多余的空白。 如果你更喜欢使用FlexBox进行对齐，那么你可以使用以下代码：

.container {
  display: flex;
  align-items: center;
}

img {
  margin-right: 10px;
}

这次我们使用display: flex和align-items: center，同时还添加了一些margin值来增加图片和文字之间的距离。 总结起来，对于多行文字和图片的对齐，我们可以使用vertical-align属性和FlexBox实现。只要掌握了适当的CSS技巧，我们就可以在网页中随心所欲地排列多行文字和图片啦！