用什么？ “垂直对齐：顶部”或“垂直对齐：文本顶部”答案

【问题标题】：What to use? "vertical-align:top" or "vertical-align:text-top"用什么？ “垂直对齐：顶部”或“垂直对齐：文本顶部”
【发布时间】：2015-10-18 11:24:04
【问题描述】：

这两个属性是一样的还是有不同的用法？ vertical-align:top 和 vertical-align:text-top

【问题讨论】：

标签： css alignment text-alignment

【解决方案1】：

区别可以通过line-height属性来解释。

MDN Source

文本顶部 将元素的顶部与父元素字体的顶部对齐。

顶部将元素及其后代的顶部与整行的顶部对齐。

.top {
  line-height: 5em;
}

.text-top {
  line-height: 5em;
}

.top span {
  vertical-align: top;
}
.text-top span {
  vertical-align: text-top;
}

<div class="top">I am vertical-align: <span>top</span>
</div>
<div class="text-top">I am vertical-align: <span>text-top</span>
</div>

请注意，在上面的例子中，text-top 在要放在文本上方时位于文本下方。

这是因为我们设置了line-height: 5em。 em 是相对于字体大小的。根据定义，text-top 将与父元素 (.text-top) 的基线对齐。

【讨论】：

【解决方案2】：

vertical-align:top :- 这会将元素的顶部与最高元素的顶部对齐。

vertical-align:text-top :- 这将使元素的顶部与父元素的字体顶部对齐

大多数情况几乎相同，因为您有相同的字体和文本。当您的行有一些其他元素（如图像和文本）时，它会产生不同的影响，这种情况text-top 会将您的元素与tallest text 对齐，即使图像高于文本但top 会将其与top of image 对齐或who ever is tallest in line whether text or image.

【讨论】：

【解决方案3】：

虽然它们之间有非常细微的区别，但是“vertical-align”属性的这两个属性在一些文本格式化时可能会非常方便。您可能会这样理解：vertical-align 属性是自我描述的，有助于相对于行框高度垂直对齐元素 .现在 vertical-align:top ，将元素的上边缘与线框的上边缘对齐。而 vertical-align:text-top 将元素的顶部边缘与行框的文本框顶部边缘对齐。

【讨论】：