如何在悬停时更改图标字体大小，同时保持其余图标的位置？

Question

我有一个图标字体行(字体令人敬畏)。在悬停时，我希望字体大小增加(更大的图标)，同时保持图标在直线内居中(水平和垂直)，其余图标应保留其大小和位置。

HTML：

<div id="container" class="class1">
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
</div>

CSS：

.class1 {
    font-size:2em;
    line-height:2em;
}
.class2:hover {
    font-size:1.2em;
}

JSFiddle：http://jsfiddle.net/8LLtg5sf/2/

我找不到适当的边距等设置。救命！

Answer 1

相反，尝试扩展它：

.class2:hover {
    transform:scale(1.3);
}

http://jsfiddle.net/8LLtg5sf/6/

Answer 2

以下是我的解决方案：

.class2 {
    display: inline-block;
    width: 1em;
    vertical-align: middle;
    text-align: center;
    margin: 0 0.1em;
}

并更新以下内容：

.class2:hover {
    /* your styles */
    margin: 0;
}

这里有一个小提琴：http://jsfiddle.net/ty4tu89b/

首先，我们让它们显示为内联块，这样我们就可以给它们固定的宽度。然后我们将它们在中间垂直对齐，并水平居中。因为当鼠标悬停时，字体大小每增加0.2em，我们就在左边和右边各增加0.1em的边距。

悬停时，边距应为0。瞧！他们待在原地不动。