Html 如何将文本与图标字体伪元素垂直对齐

我正在尝试垂直对齐字体图标。我尝试过“垂直对齐：中间”，但我总是得到一点对齐差异。下面的示例有两种不同的图标使用方法，但它们没有正确对齐

JSFIDLE上的一个示例：

div{
字体大小：50px；
字体系列：helvetica、arial、无衬线字体；
文本转换：大写；
背景：黄色；
}
.购物车{
边缘顶部：20px；
}
.购物车：以前{
字体系列：“狂热的图标”！重要；
字体大小：正常；
内容：“b”；
右边距：5px；
垂直对齐：中间对齐；
文本转换：无；
}
购物车
购物车

---

谢谢。

我认为它的字体大小不同。因为你使用了狂热的图标字体。所以我认为您可以尝试在之前为cart:：添加填充

display: inline;
font-family: "fanatic-icons" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
padding-bottom: 15px; //added it
text-transform: none !important;
vertical-align: middle;

祝你好运

.cart:before {
  font-family: "fanatic-icons" !important;
  font-weight: normal;
  content: "b";
  margin-right: 15px;
  vertical-align: middle;
  text-transform: none;
  float: left;
}

---

向左浮动，向右调整边距将使其适合中间位置。

如下更新css。我还向您的HTML添加了一个类。 这可以通过使用显示来实现：内联块；和css中的浮点属性

CSS

HTML:

运货马车
运货马车

文本不应该在文本元素中吗？线的高度不起作用？

.cart:before {
  font-family: "fanatic-icons" !important;
  font-weight: normal;
  content: "b";
  margin-right: 15px;
  vertical-align: middle;
  text-transform: none;
  float: left;
}

div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}

.cart {

display :inline-block;
width : 50%;

}

.cart1{
display: inline-block;
width:50%;
float:right;


}

.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;  
text-transform: none;
}

<div class ="cart1">
    <span class="icon icon-shopping-cart"></span>
    Cart
</div>

<div class="cart">
    Cart
</div>