css文字在图片下方-代码示例

标题：CSS实现文字在图片下方-代码示例

正文：

在网页设计中，有时候我们希望在图片下方添加一段文字，以起到更好的信息传递作用。本文将介绍如何使用CSS实现文字在图片下方的效果，并提供相应的代码示例。

我们可以使用CSS的position属性来控制文字的位置。通过设置position为relative，可以使文字相对于图片进行定位。接下来，我们可以使用top属性来调整文字相对于图片的垂直位置。例如，将top设置为100%时，文字将出现在图片的下方。

下面是一个示例代码，演示了如何实现文字在图片下方的效果：

HTML代码：

<div class="4265-39e1-7102-2956 container">
  <img src="example.jpg" alt="示例图片">
  <div class="39e1-7102-2956-1353 text">这是一段文字</div>
</div>

CSS代码：

.container {
  position: relative;
  display: inline-block;
}
.text {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  text-align: center;
}

在上述代码中，我们首先创建了一个容器（container），并在容器内部放置了一张图片和一段文字。通过设置容器的position为relative，我们可以使文字相对于容器进行定位。

接着，我们为文字添加了一个类名为"text"的div元素，并设置其position为absolute，使其脱离文档流。通过设置top为100%，文字将出现在图片的下方。为了使文字居中显示，我们还设置了text-align为center。

通过以上的代码，我们成功实现了文字在图片下方的效果。你可以根据自己的需求调整文字的样式和位置，以适应不同的设计需求。

通过使用CSS的position属性，我们可以轻松实现文字在图片下方的效果。通过设置容器的position为relative，文字的position为absolute，并调整top属性，我们可以控制文字相对于图片的位置。以上是一个简单的代码示例，希望能帮助你实现自己的设计需求。