css中文字与图片对齐

在 CSS 中，文字与图片对齐是一项非常常见的需求。本文将分享一些实现方法，帮助你实现你需要的对齐效果。
一、使用 vertical-align 属性
vertical-align 属性可用于将文本与图片垂直对齐。默认情况下，文本与线框对齐，但如果你想使文本与图像对齐，可以将 vertical-align 属性设置为 middle。以下是示例代码：

p {
  display: inline-block;
}

img {
  vertical-align: middle;
} 

以上代码可以实现一个行内文本与图片对齐的效果。
二、设置 line-height 属性
如果你想要实现让多个图片在一行内对齐，你可以尝试设置 line-height 属性，如下：

div {
  line-height: 50px;
}

img {
  vertical-align: middle;
} 

将 div 容器的 line-height 属性设置为所需高度，再将图片的 vertical-align 属性设置为 middle，即可实现多个图片在一行内对齐的效果。
三、使用 flexbox 布局
如果你在使用现代浏览器进行开发，可以使用 flexbox 布局来实现图片与文本的对齐。以下是示例代码：

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

以上代码中，我们将容器的 display 属性设置为 flex，再将 align-items 属性设置为 center，即可实现文本与图片垂直对齐的效果。
总结
在 CSS 中，实现文本与图片对齐有多种方法可供选择，以上是其中的三种实现方法。根据不同需求选择合适的方法，可以帮助你完美地实现你所需要的效果。