字体真棒5 svg图标和文本在顶部垂直对齐

Question

我有一个关于codepen、code source等图标和文本垂直对齐的例子。有没有一种不用JS代码就能做到这一点的好方法？我喜欢与li元素和其他样式保持线条高度。

Answer 1

添加垂直对齐：中间到svg元素：

.svg-inline--fa.fa-li {
vertical-align: middle;
}

从现有的.fa-li-css类中删除position:abosolute，因为这会破坏布局并阻止垂直对齐：middle以正常工作

.fa-li {
/*left: -2em; */
position: relative;
text-align: center;
width: 2em;
line-height: 1.6;
}

Answer 2

难道不能在fa图标顶部添加填充以使其与文本对齐吗？类似的东西

.fa-amazon {
padding-top: 5px;
}