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

想想这个

我们可以观察到，如果将鼠标悬停在瓷砖上（由

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;
}

同样的现象仍在发生

我不太清楚问题出在哪里

有人能帮我吗

---

感谢给

一个
垂直对齐：中间
。包装器
解决了这个问题。它是由
显示：内联块
规则引起的。因此，始终不要忘记将
垂直对齐
添加到
内联块
项中

.wrapper{
显示：内联块；
垂直对齐：中间对齐；
}

预览


Plunkr: