[英]How to vertically align text with icon font pseudo element
我正在嘗試垂直對齊字體圖標。 我已經嘗試過“ 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>
謝謝。
我認為這是字體大小的差異。 因為您使用的是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;
祝好運 !
.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添加了一個類。 這可以通過使用display:inline-block;來實現。 和浮動屬性的CSS
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.