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; } 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添加到 font awesome icon 以垂直对齐 icon。 我相信这就是您要找的。

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>