为什么在悬停时使用角度变量切换图像会导致图像向下移动

Question

考虑这个plunker example

我们可以观察到，如果我们将鼠标悬停在瓷砖上（由ng-if控制），则瓷砖会垂直移动。

这是css

.tile-wrapper {
    width: 142px;
    height: 142px;
    border: solid 1px #cecece;
    margin-left: 25px;
    display: flex;
    align-items: center; /* align vertical */
    justify-content: center; /* align horizontal */
}

.wrapper {
    display: inline-block;
}

我验证我是否除去了除

之外的所有内容

.tile-wrapper {
    width: 142px;
    height: 142px;
    border: solid 1px #cecece;
}

.wrapper {
    display: inline-block;
}

同样的现象仍然存在

我不确定是什么问题。

有人能帮助我吗？

由于

Answer 1

给vertical-align: middle .wrapper解决问题。由display: inline-block 规则引起的。因此，请不要忘记将vertical-align添加到inline-block个项目。

.wrapper {
    display: inline-block;
    vertical-align: middle;
}

预览

Plunkr：http://plnkr.co/edit/zRZ8rVo0zSJeVYxx57Rm?p=preview