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

【问题标题】：CSS vertically align center font awesome icon to textCSS垂直对齐中心字体真棒图标到文本
【发布时间】：2020-03-11 16:26:40
【问题描述】：

我卡住了，无论<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>

【问题讨论】：

使用垂直对齐：中间；为我标记

标签： html css fonts sass font-awesome

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

将 css vertical-align:middle 添加到字体真棒图标以垂直对齐图标。我相信这就是你要找的。p>

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

【讨论】：

【解决方案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>

【讨论】：