CSS垂直對齊中心字體真棒圖標爲文字

Question

我被卡住了，無論<a>標籤字體大小是多少，我該如何垂直居中箭頭？

body { 
 
    font-family: Arial, 'sans-serif'; 
 
} 
 

 
a { 
 
    font-weight: 500; 
 
    font-size: 30px; 
 
    color: #000; 
 
} 
 

 
i { 
 
    font-size: 12px !important; 
 
    font-weight: 300; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div> 
 
    <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a> 
 
</div>

Answer 1

使用i { vertical-align: middle; }

body{ 
 
    font-family: Arial, 'sans-serif'; 
 
} 
 
a { 
 
    font-weight: 500; 
 
    font-size: 30px; 
 
    color: #000; 
 
} 
 
i { 
 
    font-size: 12px !important; 
 
    font-weight: 300; 
 
vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
    <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a> 
 
</div>

Answer 2

使用vertical-align: middle;

body{ 
 
    font-family: Arial, 'sans-serif'; 
 
} 
 
a { 
 
    font-weight: 500; 
 
    font-size: 30px; 
 
    color: #000; 
 
} 
 
i { 
 
    font-size: 12px !important; 
 
    font-weight: 300; 
 
    vertical-align: middle;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
    <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a> 
 
</div>

Answer 3

添加CSS vertical-align:middle到字體真棒圖標，垂直對齊的圖標。我相信這是你要找的。

JS提琴鏈接：https://jsfiddle.net/mpsingh2003/cbra9o2b/

Answer 4

用途：vertical-align: 50%;

body{ 
 
    font-family: Arial, 'sans-serif'; 
 
} 
 

 
a { 
 
    font-weight: 500; 
 
    font-size: 30px; 
 
    color: #000; 
 
} 
 

 
i { 
 
    font-size: 12px !important; 
 
    font-weight: 300; 
 
    vertical-align: 50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a>