Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

为什么？

因为内联块元素使用＆＃34; white-space＆＃34;呈现。你可以在 demo 中看到这一点，其中父元素上没有设置高度/宽度。

使用vertical-align:middle;＆＃34;空格＆＃34;在元素之前渲染（在顶部）（演示中的黑线）。此空间将子元素向下移动，因此它不会出现垂直居中。

如何解决：

您可以使用display:block;并计算应用于子元素的边距，使其以verticaly和horzontaly为中心。

您还可以查看this question，其中讨论了空白区域以及避免它们的方法。

Answer 2

好吧，看起来像font-size：0; .a1似乎也解决了这个问题。

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

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

Answer 3

.a1 {
  display: inline-block;
  background-color: #000;
}
.i {
  display: block;
  width: 16px;
  height: 16px;
  margin: 6px 6px;
  background-color: #f00;
}

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

Answer 4

.a1 {
  display: inline-block;
  background-color: #000;
}
.i {
  display: block;
  width: 16px;
  height: 16px;
  margin: 6px 6px;
  background-color: #f00

内联块垂直居中问题

4 个答案: