HTML / CSS：垂直对齐范围与垂直对齐和行高答案

【问题标题】：HTML/CSS: Vertical aligning span with vertical-align and line-heightHTML / CSS：垂直对齐范围与垂直对齐和行高
【发布时间】：2020-02-09 23:16:01
【问题描述】：

很抱歉打死马，但我一生都无法理解为什么以下内容不起作用。

设置line-height: 50px
设置vertical-align: top
据我了解，这应该使 line-box 高 50 像素，然后 vertical-align 应该 according to MDN 能够在其中移动内联元素。

具体来说：

以下值垂直对齐元素相对于整行：

底部

将元素的底部及其后代与底部对齐整条线。

这两个我都试过了：

&lt;span style="line-height: 50px; border: 1px solid red; vertical-align: bottom"&gt;Some text&lt;/span&gt;

还有这个：

<div style="line-height: 50px; border: 1px solid yellow">
   <span style="border: 1px solid red; vertical-align: bottom">Some text</span>
</div>

这是我希望将跨度定位在底部的最后一个版本。它说 line-box 应该是 50px，然后在子 span 上使用 vertical-align。

PS：请不要只说“使用 flexbox”或类似的话。我想了解内部工作原理/概念上为什么上面没有将跨度定位在行的底部。

【问题讨论】：

来自developer.mozilla.org/en-US/docs/Web/CSS/vertical-align "请注意，vertical-align 仅适用于 inline 和 table-cell 元素：您不能使用它来垂直对齐块级元素。"
伙计们，请在回复之前阅读帖子/知道它是如何工作的。如果您愿意，您可以尝试将跨度包围在另一个跨度中，并将 line-height 放在上面，或者将 line-height 放在 span 本身上，没有区别。 @Dan 我没有在块元素上使用垂直对齐，我在 span 上使用它，其中行框比元素本身高。
phrogz.net/css/vertical-align/index.html
@dippas，你能解释一下这个问题是怎么重复的吗？
@dippas 它不一定是块元素。 vertical-align 适用于内联元素，OP 知道如何垂直对齐，但是行高混淆，这就是我们没有达到预期效果的原因。这不是关于“如何对齐”，而是“为什么对齐没有按预期工作”

标签： html css vertical-alignment

【解决方案1】：

你说的都是对的，但你只是忘记了继承。 span 元素在 div 上定义的 line-height 相同，这就是为什么 bottom 在您的情况下无效。

将值重置为initial，它将起作用。

<div style="line-height: 50px; border: 1px solid yellow">
<span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span>
</div>

【讨论】：

太棒了，恰到好处。谢谢你。我会尝试一些事情，看看是否还有其他问题。否则会将其标记为解决方案。这也解释了为什么当行中有两个元素时它会起作用（强制行框大于最小元素）。
@Magnus 尝试将line-height:0 添加到跨度并增加它以查看会发生什么；）然后您将了解一切
在这种情况下，div元素将包含一个行高为50px的行框。然后添加一个行高小于 50 像素的跨度元素。因此，span-element 可以相对于 line box 的其余部分垂直对齐。

【解决方案2】：

一个 line box 可以有多个不同 line-height 的元素。例如：

<p>
  <span class="segment1">Segment 1</span>
  <span class="segment2">Segment 2</span>
  <span class="segment3">Segment 3</span>
</p>

默认情况下，段落中的所有元素都具有相同的行高。

但是如果让 span 元素的行高小于段落，我可以使用 vertical-align 调整它们之间的相对关系。

p {
  background-color: black;
  color: white;
  line-height: 40px;
}

.segment1 {
  background-color: red;
  line-height: 20px;
  vertical-align: top;
}

.segment2 {
  background-color: green;
  line-height: 20px;
  vertical-align: baseline
}

.segment3 {
  background-color: blue;
  line-height: 20px;
  vertical-align: bottom;
}

看看这个codepen：https://codepen.io/anon/pen/pVWQQy

vertical-align 属性可用于垂直对齐内联元素的框在其包含的行框内。

在您的第一个示例中，您尝试垂直对齐元素自己的行框内的文本。这是不可能的。如果增加行高，基线上方和下方将添加等量的空间。

在第二个示例中，您尝试垂直对齐块元素 (<div>) 内的内联元素 (<span>)，而不是行框。

【讨论】：

您可以根据需要在跨度本身上设置 line-height，这没有区别（参见示例一）。它适用于元素，但不适用于其他内联元素（如 span）。
Vertical-align 相对于同一行上的其他元素定位元素。看这个例子：codepen.io/anon/pen/qYPQoV。如果增加行高，文本上方和下方将始终添加相同数量的空间。

【解决方案3】：

使用高度而不是行高。使用后者是将孩子垂直定位在中心。

<div style="height: 50px; border: 1px solid blue; vertical-align: top;">
   <span style="border: 1px solid red;">Some text</span>
</div>

【讨论】：