FontAwesome在自定义元素上的位置

Question

我有一个自定义元素，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;