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>