FontAwesome在自定义元素上的位置[重复]

Question

这个问题已经在这里有了答案：

• 如何在div中垂直对齐文本？ 29个答案

我有一个自定义元素，SASS如下所示：

.tile {    
    &.account-tile:before {
        font-family: FontAwesome;
        content: "\f003";
    }
}

.tile:before {
    color: rgba(255,255,255,0.5);
    font-size: 50px;
}

这些图块大小不同。 我想将图标放置在图块的中央，但不确定如何有效地执行此操作。 有人可以帮我吗？

更新1

我将SASS更改为：

.tile {    
    &.account-tile:before {
        font-family: FontAwesome;
        content: "\f007";
    }
}

.tile:before {
    color: rgba(255,255,255,0.5);
    font-size: 100px;
    display: block;
    text-align: center;
    vertical-align: middle;
    background-color: pink;
    height: 100%;
}

但是，尽管它水平居中，但它并不垂直居中。

Answer 1

由于Font Awesome是一种字体，请尝试text-align: center;