HTML / CSS：垂直对齐范围与垂直对齐和线高

Question

很抱歉打败了一匹死马，但我不能为我的生活理解为什么以下不起作用。

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

具体做法是：

  

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

     

底

     

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

我试过这两个：

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

这是上面的最后一个版本，我希望将跨度定位在底部。它表示行框应为50像素，然后vertical-align用于孩子span。

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

修改

• 此帖子与How do I vertically align something inside a span tag?不重复。请参阅下面的评论，了解原因。

Answer 1

你所说的一切都是正确的，但你只是忘记了继承的东西。 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>

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可用于在其包含的行框内垂直对齐内联元素框。

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

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

Answer 3

使用height而不是line-height。使用后者是将孩子垂直放置在中心。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;