css实现图标上文字居中

CSS 中，有许多方法可以实现图标上文本的居中，这样可以使得整个页面更加美观、舒适。

.icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("icon.png");
    background-size: cover;
    vertical-align: middle; /* 垂直居中 */
}
.text{
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle; /* 垂直居中 */
    margin-left: 10px;
}

以上代码实现了一个图标和文本的居中，其中 icon 层用来装载图标，text 层用来装载文本，它们的宽度和高度要一致，用来精确对齐。vertical-align 属性可以使元素垂直居中，并用 margin-left 来让文本与图标有一个间隔。

需要注意的是，如果图标和字体大小不一致时，可以通过设置 line-height 属性和 height 属性来保证整个元素的高度，以免出现文字超出元素的情况。