主页 / 问题 / 758915
Accepted
andreymal
Asked:2020-12-16 02:38:35 +0000 UTC2020-12-16 02:38:35 +0000 UTC

为什么垂直对齐：中间低于中间？

  • 772

div {
  background-color: blue;
  height: 36px;
  line-height: 36px;
}

i {
  background-color: red;
  display: inline-block;
}

i.top {vertical-align: top;}
i.middle {vertical-align: middle;}
<div>foo<i class="top">top</i><i class="middle">middle</i>baz</div>

html

1 个回答

  1. Best Answer

    我想通了：因为vertical-align: middle中间不是父块的中间，而是小写字母的中间x。但是由于大多数情况下高度x小于大写字母的高度，因此它的中间略低于块的中间。同时，从子块（带 的那个middle）中取出块的中间进行对齐，并将这个中间的位置调整到x父块小写字母的中间，结果一切搬出去。

    所有确切的变化都取决于当前的字体及其大小：如果您放置一个所有字母高度相同的字体，它middle可以按预期工作（尽管会有其他问题，但那是另一回事了）。

    标准的正式定义：

    middle: 将框的垂直中点与父框的基线加上父框x 高度的一半对齐。

    • 4

相关问题