[分享]css中如何把文字放在图片下面

发布于 2024-11-11 19:28:23

今天我们来学习一下CSS中如何把文字放在图片下面。首先，我们需要用到HTML的标签来插入图片，然后使用CSS来控制图片和文字的位置。下面是一个例子：这是一段描述文字。在上面的例子中，我们用标签...

今天我们来学习一下CSS中如何把文字放在图片下面。首先，我们需要用到HTML的标签来插入图片，然后使用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;属性来为段落添加一些上边距，使它们与图片之间有一些间距。
通过这样的方法，我们就可以在网页中轻松地将文字放在图片下面了。希望本文对你有所帮助！

css 教程

一个月内的热帖推荐

[分享]css中如何把文字放在图片下面

91云脑