html - 内联 block 垂直居中问题

Question

我有以下简单的代码片段。它是从我的应用程序中取出的，其中 .a1 是一个容器按钮，它有一个图标。该图标应该垂直居中对齐父元素的行高/高度，但它从顶部移动了 1px。你能解释一下为什么会这样吗？有什么解决办法吗？

.a1 {
  display: inline-block;
  width: 28px;
  line-height: 28px;
  background-color: #000;
  text-align: center;
  vertical-align: middle;
}
.i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #f00;
  vertical-align: middle;
}

<div class="a1"><i class="i"></i>
</div>

Answer 1

为什么？

因为行内 block 元素以“空白”呈现。你可以在这个 demo 中看到这个 父元素上没有设置高度/宽度。

当您使用 vertical-align:middle; 时，“空白”会在元素之前(在顶部)呈现(演示中为黑线)。此空间将子元素向下移动，因此它不会显示为垂直居中。

如何修复:

您可以使用 display:block; 并计算应用于子元素的边距，使其垂直和水平居中。

你也可以看看this question其中讨论了空白和避免它们的方法。