Как вертикально выравнивать значок шрифта

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

Вы можете попробовать vertical-align: text-bottom или vertical-align: text-top, в зависимости от который, по вашему мнению, более вертикально центрирован.

Для вашей корзины значок, кажется text-top является наиболее вертикально центрированным.

Пример по адресу: https://jsfiddle.net/p3g189bg/

Answer 2

Вы можете попробовать vertical-align:middle;

или line-height:1;

или используя padding свойство можно задать положение значка

пример использования vertical:middle; имущества расслоения плотной скрипки: http://jsfiddle.net/vrcarwrj/

Answer 3

Попробуйте использовать line-height атрибут

Вы можете установить его в 0.5,1,1.5 и т.д.

Answer 4

В качестве альтернативы выше, с использованием методы пяди элемента вы описываете, вы могли бы относительно поместите тег span относительно его родительского элемента div.

Как:

div{ 
position: relative; 
}  
span.icon-shopping-cart{ 
position: relative; 
top: 5px; 
} 

Answer 5

Вы можете попробовать использовать valign: middle

и/или затем установив line-height в 1px, 1,5 пикселя и т.д.