首页 话题 小组 问答 好文 用户 我的社区 域名交易

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

发布于 2024-11-11 19:28:23
0
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;属性来为段落添加一些上边距,使它们与图片之间有一些间距。
通过这样的方法,我们就可以在网页中轻松地将文字放在图片下面了。希望本文对你有所帮助!
评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流