将文本设置在图像的正下方可以通过以下步骤实现:
以下是一个示例代码:
<div class="container">
<img src="image.jpg" alt="Image">
<div class="text-container">
<p>这是文本</p>
</div>
</div>
.container {
position: relative;
}
.text-container {
display: block;
position: absolute;
top: 100%;
left: 0;
text-align: center;
color: black;
font-size: 16px;
font-family: Arial, sans-serif;
padding: 10px;
}
在这个示例中,图像和文本都被包含在一个名为"container"的容器中。文本容器被设置为绝对定位,并使用top属性将其放置在图像的正下方。文本容器中的文本被居中对齐,并具有指定的颜色、字体大小和字体样式。可以根据需要调整CSS属性的值来满足具体的设计要求。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云