[分享]css中怎么把图片和文字对齐

在CSS中，我们经常需要将图片和文字对齐，以保证页面的美观和可读性。下面是一些实现方法：1.使用float属性可以将文字和图片都放在一个容器中，给图片添加float属性，让它脱离文档流并沉浸在文字中。...

在CSS中，我们经常需要将图片和文字对齐，以保证页面的美观和可读性。下面是一些实现方法：
1.使用float属性
可以将文字和图片都放在一个容器中，给图片添加float属性，让它脱离文档流并沉浸在文字中。此时可以通过padding和margin来调整它们之间的距离并对齐。例如：

<div class="container">
  <img src="example.jpg" style="float: left; margin-right: 10px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus viverra malesuada. Aliquam ut tortor at ligula hendrerit sagittis.</p>
</div> 

2.使用vertical-align属性
可以将文字和图片分别放在两个容器中，设置它们的display属性为inline-block，并对齐它们的基线。例如：

<div class="container">
  <img src="example.jpg" style="display: inline-block; vertical-align: middle; margin-right: 10px;">
  <p style="display: inline-block; vertical-align: middle;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus viverra malesuada. Aliquam ut tortor at ligula hendrerit sagittis.</p>
</div> 

以上是两种常用的方法，也可以根据具体情况选择其他方式。在调整样式时，可以使用浏览器的开发者工具实时查看效果，以便快速完成布局。