[分享]css中如何文字位于图片下方

在网页设计中，经常会遇到图片和文字并列展示的情况。为了更好地展示图片和方便用户阅读文字信息，我们通常需要将文字放置在图片的下方。那么在CSS中，我们该如何实现这一功能呢？首先，在HTML中，我们需要使...

在网页设计中，经常会遇到图片和文字并列展示的情况。为了更好地展示图片和方便用户阅读文字信息，我们通常需要将文字放置在图片的下方。那么在CSS中，我们该如何实现这一功能呢？
首先，在HTML中，我们需要使用一个包裹图片和文字的容器元素，比如div标签。在这个容器元素中，分别放置图片和文字。代码如下所示：

<div class="wrapper">
  <img src="image.png" class="img">
  <p class="content">这是一段文字信息。</p>
</div> 

接下来，在CSS中，我们需要设置容器元素的position属性为relative，以便下方文字的绝对定位相对于这个容器元素进行定位。代码如下所示：

.wrapper {
  position: relative;
} 

然后，我们创建一个class名为“.content”的样式，将其position属性设置为absolute，并将其bottom属性设置为0，即可将文字定位在图片的下方。代码如下所示：

.content {
  position: absolute;
  bottom: 0;
} 

最后，我们需要注意的是，因为文字是绝对定位的，所以容器元素的高度需要和图片的高度一致，否则会出现文字遮盖图片的情况。为了更好地控制样式，我们可以给图片设置一个class名为“.img”，并在CSS中设置其高度为100%。代码如下所示：

.img {
  height: 100%;
} 

综上所述，通过以上步骤，我们就可以实现将文字放置在图片下方的效果了。完整的代码如下所示：

<div class="wrapper">
  <img src="image.png" class="img">
  <p class="content">这是一段文字信息。</p>
</div>

.wrapper {
  position: relative;
}

.content {
  position: absolute;
  bottom: 0;
}

.img {
  height: 100%;
}