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

Question

考虑这个 plunker example

我们可以观察到，如果我们将鼠标悬停在图 block 上(由 ng-if 控制)，图 block 会垂直移动。

这是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

给 .wrapper 一个 vertical-align: middle 解决了这个问题。这是由 display: inline-block 规则引起的。所以永远不要忘记将 vertical-align 添加到 inline-block 元素。

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

预览

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