将文本置于div中的图标下,可以通过以下步骤实现:
<div id="icon-container">
<i class="fa fa-icon"></i>
<span>文本内容</span>
</div>
#icon-container {
position: relative;
}
.fa-icon {
position: absolute;
top: 0;
left: 0;
}
#icon-container span {
position: absolute;
top: 100%;
left: 0;
}
在上述代码中,我们使用了Font Awesome图标库中的图标(class为fa fa-icon),你可以根据自己的需求替换为其他图标库或自定义图标。
.fa-icon {
font-size: 24px;
color: #000;
}
#icon-container span {
font-size: 14px;
color: #999;
margin-top: 5px;
}
通过以上步骤,你可以将文本置于div中的图标下方,并根据需要进行样式调整。请注意,以上代码仅为示例,你可以根据实际情况进行修改和优化。
推荐的腾讯云相关产品:腾讯云COS(对象存储服务),提供高可靠、低成本、安全可扩展的云端存储服务,适用于各种场景下的文件存储和数据备份。详情请参考腾讯云COS产品介绍:腾讯云COS。
领取专属 10元无门槛券
手把手带您无忧上云