Question

我有一个带有图标字体的行（Font Awesome）。在悬停时我想要增加字体大小（更大的图标），同时保持图标在线条中心（水平和垂直），其余图标应保持其大小和位置。

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.瞧！他们躺在那里。

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

2 个答案: