再次垂直对齐内联

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

 Textx - 

为什么中间没有第一个元素对齐就不起作用

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

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

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

 Textx xxx - 

可以看到第二个span其实是按普通文本的中间对齐的

所以规则很简单。如果您想将所有内联元素居中对齐，则必须向每个元素添加 vertical-align: middle。

您也可以在父元素上使用 table-cell（它的工作方式有点不同，并对齐内部的所有内联元素）或如上所示 flex-box。

再次垂直对齐内联

Vertical-align inline, again

css

vertical-alignment