Question

我知道外面有很多文章，而且我了解有关垂直的大多数技术，但是我不知道为什么这种方式会起作用：

p {
  border: 1px solid red;
}

.one {
  font-size: 50px;
}

.two {
  font-size: 30px;
  vertical-align: middle;
}

<p>
  <span class="one">Textx</span>
  <span class="two">-</span>
</p>

问题是：我的.two元素的中间是什么？我是否总是需要为第一个元素设置垂直对齐才能使其正常工作？谢谢。

Answer 1

基本上，vertical-align: middle;将元素的中间点对齐parent's baseline + 1/2 parent's height

在您的情况下，第一个span被baseline对齐，因此您看不到第二个span对齐的影响。因此，在这里您需要为第一个跨度指定vertical-align: middle;。但是，例如，如果您想将.two对齐top，则第一个跨度不需要指定vertical-align。

或者，您可以使用flex-box来调整跨度：

p {
  border: 1px solid red;
  
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap; /* if you suppose multiline content */
}

.one {
  font-size: 50px;
}

.two {
  font-size: 30px;
}

<p>
  <span class="one">Textx</span>
  <span class="two">-</span>
</p>

为什么没有第一个元素对齐，中间无法工作

实际上是这样。首先，让我们了解中间件的总体工作原理。它采用父元素的字体大小，此文本的基线，文本高度的1/2（一半），并通过计算的点将元素对齐。

在这种情况下，父元素是p，而font-size是16px（至少在这里）。第一个范围为font-size: 50px。您正在等待第二个跨度将根据第一个跨度的字体大小（50px）对齐，但实际上它是由父级的16px对齐的。而且由于第一个跨度是按基线对齐的（默认情况下），所以您看不到.two有任何影响。为了说明正在发生的情况，让我们尝试在跨度之间添加文本

p {
  border: 1px solid red;
}

.one {
  font-size: 50px;
}

.two {
  vertical-align: middle;
}

<p>
  <span class="one">Textx</span>
  xxx 
  <span class="two">-</span>
</p>

您可以看到第二个跨度实际上是在普通文本的中间对齐的。

所以规则很简单。如果要使所有内联元素靠中间对齐，则必须向每个元素添加vertical-align: middle。

此外，您也可以在上级元素上使用table-cell（它的工作原理有所不同，并且将内部所有内联元素对齐）或如上所述的flex-box。

再次垂直内联

1 个答案: