css中如何把文字放在图片下面

<div class="container">
  <img src="example.png" alt="example">
  <p>这是一段描述文字。</p>
</div> 

标签包裹图片和文字，并用class属性来命名它们。接下来，我们需要使用CSS来控制它们的位置。下面是一个简单的CSS样式：

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

img {
  max-width: 100%;
}

p {
  margin-top: 10px;
} 

在上面的CSS样式中，我们首先使用flex布局来使图片和文字在垂直方向上排列。align-items: center;属性可以使它们在水平方向上居中对齐。然后，我们使用max-width: 100%;属性来确保图片不会超出其父容器的宽度。最后，我们使用margin-top: 10px;属性来为段落添加一些上边距，使它们与图片之间有一些间距。
通过这样的方法，我们就可以在网页中轻松地将文字放在图片下面了。希望本文对你有所帮助！