css中图片与文本对齐

在CSS中，对齐图片和文本是一个比较常见的需求。这是因为很多时候，我们需要将一些图片和相关的文字进行组合展示，以便于用户更好地理解。在这篇文章中，我们将介绍一些常见的方法，帮助你快速实现图片和文本的对齐。

1. 行内块元素

    <div class="container">
      <img src="img.jpg" alt="图片">
      <p>这是一段文字</p>
    </div>

在CSS中，我们可以将图片和文字都设置为行内块元素，从而达到对齐的效果。代码如下：

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

这里，我们将图片和文本都设置为inline-block，再使用vertical-align: middle让它们垂直居中对齐。

2. 相对定位和负边距

    <div class="container">
      <img src="img.jpg" alt="图片">
      <p>这是一段文字</p>
    </div>

在CSS中，我们也可以使用相对定位和负边距来实现对齐。代码如下：

    .container img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 10px;
    }
    .container p {
      display: inline-block;
      vertical-align: middle;
    }

这里，我们首先将图片相对于容器进行定位，并将其移动到垂直居中的位置。然后，通过负边距的方式来控制图片和文本之间的距离。

3. Flex布局

    <div class="container">
      <img src="img.jpg" alt="图片">
      <p>这是一段文字</p>
    </div>

在CSS3中，我们可以使用Flex布局来实现对齐。代码如下：

    .container {
      display: flex;
      align-items: center;
    }
    .container img {
      margin-right: 10px;
    }

这里，我们将容器设置为flex布局，并使用align-items: center将图片和文本居中对齐。

以上就是三种实现图片和文本对齐的方法。你可以根据实际情况选择相应的方案。