css图标文字居中显示文字

在前端开发中，经常会使用Iconfont等工具来引用CSS图标。但是，有时候在文字和图标并存的情况下，需要让文字也能够与图标对齐且居中显示。本文将介绍一种实现的方法。

首先，为了让文字居中，我们需要给文本的父元素设置line-height属性，并将其设置为与字体大小相同的值。例如，如果文字的大小是16px，则可以设置line-height：16px；这样可以让文字垂直居中。

.text{
  font-size: 16px;
  line-height: 16px;
}

接下来，我们需要使用CSS伪元素来添加图标。通过:before或:after等伪元素，我们可以在DOM中添加一个看不见的元素，并在其中插入CSS图标。

.text:before{
  content: "\icon";
  font-family: iconfont;
  margin-right: 5px;
}

注意，content属性里的“\icon”要根据实际情况改为对应的Unicode码或Symbol名。可以在Iconfont等工具中查看。

此时，文本和图标已经放在了同一行。接下来，我们需要调整文本的位置，使其与伪元素对齐。可以使用position绝对定位和transform属性来实现。

.text{
  position: relative;
}

.text:before{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

其中，将top设置为50%后，使用transform将伪元素向上移动50%的高度。这样就可以让文本与图标对齐居中了。

当然，也可以按照个人需求修改样式。以上就是使用CSS实现CSS图标文字居中显示的方法。