HTML/CSS：垂直对齐范围 vertical-align 和 line-height

Question

抱歉打死马，但我无法理解为什么下面的方法不起作用。

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

具体来说：

The following values vertically align the element relative to the entire line:

bottom

Aligns the bottom of the element and its descendants with the bottom of the entire line.

这两个我都试过了：

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

还有这个：

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

这是我希望将 span 放在底部的最后一个版本。它说 line-box 应该是 50px，然后 vertical-align 用在 child span.

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

Answer 1

使用高度代替 line-height。使用后者是将child垂直放置在中心。

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

Answer 2

一个行框可以有多个不同行高的元素。例如：

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

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

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

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

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

Answer 3

你说的都对，只是你忘记了继承。 span 元素具有在 div 上定义的相同行高，这就是 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>

HTML/CSS：垂直对齐范围 vertical-align 和 line-height

HTML/CSS: Vertical aligning span with vertical-align and line-height

html

css

vertical-alignment