今天我们来学习一下CSS中如何把文字放在图片下面。首先,我们需要用到HTML的标签来插入图片,然后使用CSS来控制图片和文字的位置。下面是一个例子: 这是一段描述文字。 在上面的例子中,我们用标签...
今天我们来学习一下CSS中如何把文字放在图片下面。首先,我们需要用到HTML的标签来插入图片,然后使用CSS来控制图片和文字的位置。下面是一个例子:
<div class="container">
<img src="example.png" alt="example">
<p>这是一段描述文字。</p>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
img {
max-width: 100%;
}
p {
margin-top: 10px;
}
align-items: center;
属性可以使它们在水平方向上居中对齐。然后,我们使用max-width: 100%;
属性来确保图片不会超出其父容器的宽度。最后,我们使用margin-top: 10px;
属性来为段落添加一些上边距,使它们与图片之间有一些间距。