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>