CSS垂直对齐中心字体真棒图标到文本

Question

我卡住了，无论<a>标签的字体大小是什么，我怎么能垂直居中箭头？

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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添加到font awesome图标以垂直对齐图标。我相信这是你在寻找的。

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>