css在图标下显示文字居中显示

CSS是我们日常开发中经常使用的样式语言，除了可以用来设置网页的字体、颜色等样式外，也可以用来处理网页中的图标显示效果。下面我们来讲述如何使用CSS来实现图标下的文本水平居中对齐。

.icon {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.icon img {
    vertical-align: middle;
}
.icon span {
    display: inline-block;
    margin-left: 8px;
}

首先，我们需要给图标和文本容器添加宽、高、display和vertical-align属性。其中，display设置为inline-block以使容器水平排列，vertical-align设置为middle以使图标和文字对齐。text-align设置为center则可以使文本居中显示。

图标和文本容器需要分别给出各自的样式：

.icon img {
    vertical-align: middle;
}

为使图标垂直居中，需要给img元素添加vertical-align:middle属性。

.icon span {
    display: inline-block;
    margin-left: 8px;
}
    

最后，文本容器加入display:inline-block及margin-left:8px属性，可使文本、图标之间保持一定距离。

通过以上代码设置，即可实现图标下的文本水平居中对齐的效果。

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