字體真棒5 svg圖標和文本在頂部垂直對齊

Question

我有一個關於Codepen， code source以及類似圖標和文本的示例，這些圖標和文本可以垂直對齊。 有沒有JS代碼的好方法嗎？ 我喜歡保持li元素和其他樣式的行高。

Answer 1

在svg元素的中間添加vertical-align :：

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

刪除位置：從現有的.fa-li css類中完全刪除，因為這會破壞布局並防止垂直對齊：中間位置可以正常工作

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

Answer 2

您無法將fad-top放在fa圖標上以使其與文本對齊嗎？ 就像是

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