css中如何让图片和文字对齐

在Web页面设计中，使用图片和文字结合的方式可以增强页面的视觉效果，但是有时候图片和文字之间的对齐可能会出现问题。如何让图片和文字对齐呢？这就需要使用CSS来进行解决了。

首先，可以给图片设置CSS样式：

img{
  vertical-align: middle; /*垂直居中*/
  margin-right: 5px; /*设置图片和文字之间的间距*/
}

上述CSS代码的作用是将图片垂直居中，并且设置图片和文字之间的间距为5px。在HTML中，可以使用img标签来插入图片，如下所示：

<p>这是一个段落，包括文字和图片：</p>
<p>
  <img src="image.jpg">
  这是一段文字
</p>

接下来，可以给文字也设置CSS样式：

p{
  display: flex;
  align-items: center; /*垂直居中*/
}

上述CSS代码的作用是将段落的内容居中显示。需要注意的是，为了实现这个效果，需要将P标签设置为flex布局。

经过上述设置，就可以让图片和文字在垂直方向上对齐并且之间留有一定的间距了。