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

在开发过程中，有时需要在图标下面显示一行文字。想要文字居中显示同时又要保证图标在文字的左侧，该怎么实现呢？这就需要用到CSS的一些技巧了。

.icon {
    display: flex;
    align-items: center;
}
.icon img {
    margin-right: 10px;
    width: 24px;
    height: 24px;
}
.icon p {
    display: inline-block;
    line-height: 24px;
}
    

代码中，我们首先定义了一个.icon的类来包围图标和文字。使用display: flex; 和align-items: center; 来将图标和文字居中对齐。

接下来是对图标的处理。我们添加了一个img的类来指定图片的大小，将图片与文字之间的距离设置为10px。

最后是对文字的处理，我们将其设置为行内块状元素（inline-block），并且设置其line-height等于图片的高度，这样就可以将文字居中显示了。

使用以上CSS代码，我们就可以实现图标下方文字的居中显示，同时保证图标在文字左侧。在实际开发中，如果有多个图标和文字需要进行排列，只需要针对每个.icon重新定义样式即可。

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