我的目标是将一个可点击（链接）字体的图标垂直居中放置在div-bar中。不管用。相反，图标贴在div的底部。
这就是我试过的:
null
#bar {
background-color: red;
}
#bar > a {
font-size: 100px;
color: white;
background-color: green;
display: inline-block;
}
#bar > a > svg {
background-color: blue;
vertical-align: middle;
}<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<div id="bar">
<a href="https://www.google.com">
<i class="fab fa-instagram"></i>
</a>
</div>null
还有，链接怎么可能只是符号的确切区域呢？
问题出在行高上--因为您将图标的字体大小设置得太大，所以行高也增加了（行高通常大于字体字母，以允许行间的间距）。
您可以通过降低线条高度以匹配（或小于）图标的高度来修复它，例如:
#bar > a {
font-size: 100px;
line-height:75px;
/* rest of CSS */
}
工作代码段:
null
#bar {
background-color: red;
}
#bar > a {
font-size: 100px;
color: white;
background-color: green;
display: inline-block;
line-height:75px;
}
#bar > a > svg {
background-color: blue;
vertical-align: middle;
}<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<div id="bar">
<a href="https://www.google.com">
<i class="fab fa-instagram"></i>
</a>
</div>
从#bar>中删除就可以了。另外，在加载之前，请按Ctrl+F5清除缓存。Vertical-Align:Midder；a>；SVG
