Question

我正在尝试垂直对齐字体图标。我试过“vertical-align：middle”，但我总是得到一点对齐的差异。以下示例有两种不同的方式来使用图标，但它们未正确对齐。

关于Jsfiddle的一个例子： https://jsfiddle.net/crphowLg/7/

<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<style>
div {
    font-size: 50px;
    font-family: helvetica,arial,sans-serif;
    text-transform: uppercase;
    background: yellow;
}
.cart {
    margin-top: 20px;
}
.cart:before {
    font-family: "fanatic-icons" !important;
    font-weight: normal;
    content: "b";
    margin-right: 5px;
    vertical-align: middle;
    text-transform: none;
}
</style>

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

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

谢谢。

Answer 1

我认为它的字体大小不同。因为你使用fanatic-icons字体。所以我想你尝试为cart :: before

添加填充

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;

goodluck！

Answer 2

<强> DEMO

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

让它向左浮动并调整右边缘将使其适合中间。

Answer 3

如下更新您的CSS。我也为你的HTML添加了一个类。这可以通过使用display：inline-block来实现;和css中的浮动属性

DEMO

CSS

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;
}

HTML：

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

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

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

3 个答案: