html - Font awesome 5 svg 图标和文本在顶部垂直对齐

Question

我在 codepen 上有一个例子，code source并喜欢垂直对齐的图标和文本。有没有 JS 代码的好方法？我喜欢保持 li 元素和其他样式的行高。

Answer 1

添加 vertical-align: middle 到 svg 元素:

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

从现有的 .fa-li CSS 类中删除 position: abosolute，因为这会破坏布局并阻止 vertical-align: middle 正常工作

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