css在图标下显示文字

CSS是一种非常常用的样式语言，其中有一项功能就是可以在图标下方显示文字。

.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('icon.png');
    background-size: cover;
}
.icon-text {
    display: block;
    text-align: center;
}
    

如上代码所示，我们首先定义了一个名为icon的类，它使用背景图片作为图标，并设置了宽度和高度，以及图片的展示方式。然后，我们定义一个名为icon-text的类，它用于显示在图标下面的文字。我们在这个类中设置了display:block，这意味着这个元素会独占一行，并且可以设置宽度和高度。此外，我们还设置了文字的对齐方式为居中。

如果我们想在HTML中使用这些类，可以这样写：

div class="icon">
    /div>
    p class="icon-text">
    这是一段文字/p>
    

以这种方式组合使用，我们就可以在图标下方显示文字了。这种方式很常用，可以用于制作导航栏、商品列表等。在实际开发中，我们可以根据需要自行设置图标和文字的样式，实现更加灵活多样的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！