我正在尝试垂直对齐字体图标。我已经尝试过“ 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>
您可以尝试vertical-align: text-bottom
或vertical-align: text-top
,具体取决于您感觉哪个更垂直居中。
对于您的购物车图标,似乎text-top
垂直居中。
尝试使用line-height
属性
您可以将其设置为0.5,1,1.5
等
您可以尝试vertical-align:middle;
或line-height:1;
或使用padding
属性可以设置图标位置
使用vertical:middle;
属性js提琴的例子:http://jsfiddle.net/vrcarwrj/
或者,以上所述,使用您描述的span元素方法,您可以相对于其父div元素相对定位span标签。
例如:
div{
position: relative;
}
span.icon-shopping-cart{
position: relative;
top: 5px;
}
您可以尝试使用valign: middle
和/或然后将line-height
设置为1px,1.5px等
[现在是另一个通过Flexbox的示例。
span {
font-family: helvetica, arial, sans-serif;
display: inline-flex;
align-items: center;
padding: 0 1rem;
font-size: 3rem;
line-height: 4rem;
border: 1px solid #ccc;
}
/* target all Font Awesome 5 <svg> tags */
.svg-inline--fa {
padding-right: 1.5rem;
}
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
<span>
<i class="fas fa-shopping-cart"></i>
Shopping Cart
</span>