将Font Awesome图标在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>

- PenAndPapers

---

使用 vertical-align: middle; 为 i 标签设置垂直居中。 - Tamil Selvan C

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>

- Tamil Selvan C

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>

- Tree

Answer 3

在字体awesome图标上添加css vertical-align:middle以垂直对齐图标。我相信这就是你要找的。

JS fiddle链接：https://jsfiddle.net/mpsingh2003/cbra9o2b/

- manpreet

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> 

- Ehsan