html - 如何在 CSS 中将标签与 div 的 "BOTTOM"对齐？

Question

DEMO 可在以下位置找到:

http://www.bootply.com/VZ7gvA7ndE#

我将 div 的高度设置为 100px，并希望在 div 的底部显示 label。我用

#contain-word-lab {
  vertical-align: bottom;
  margin-bottom: 5px;
}

但是，这根本不起作用。 label 仍然与 div 的顶部对齐。

有没有人对此有任何想法？为什么 vertical-align 在这里不起作用？谢谢!

Answer 1

为什么 vertical-align: bottom 不能单独工作

由于父元素的高度大于标签的计算高度，使用 vertical-align: bottom 不会将该(内联)元素移动到父级的底部。

因为在内联流中，vertical-align 确定元素如何基于其父元素的基线定位；在标签上使用该属性不会改变其父级基线的位置。

内联级元素(inline、inline-block)位于它们的 baseline 中。 默认情况下。如果它们的高度不同，则最高的元素将决定其他元素的放置位置。

即在内联流中，最高的元素 will affect/move the baseline of the parent :

寻求解决方案

因此在 the parent has an explicit height 的情况下，如果我们可以有一个与父级具有完全相同高度的内联子级(一个全高的子级)，它会影响内联流并向下移动基线:

并且为了将元素(包括具有后代的字母)保留在父级中，我们应该 align them vertically by vertical-align: bottom; declaration .

10.8 Line height calculations: 'vertical-align' property

baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

bottom
Align the bottom of the aligned subtree with the bottom of the line box.

综合考虑

因此，您可以在父级中创建一个全高元素(我个人更愿意使用 pseudo-elements )以对齐底部的标签。

EXAMPLE HERE

#contain-word-div:after {
  content: "";
  display: inline-block;
  height: 100%;            /* Let it be as height as the parent */
  vertical-align: bottom;  /* Align the element at the bottom   */
}

#contain-word-lab {
  display: inline-block;
  vertical-align: bottom;  /* Align the element at the bottom   */
}