可以在以下网址找到DEMO：

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

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

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

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

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

---

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

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

因为在内联流程中， vertical-align根据父级的基线确定元素的定位方式; 在标签上使用该属性不会改变其父项的基线位置。

内联级别元素（ inline ， inline-block ）默认位于其基准 inline-block 。 如果他们有不同的高度，最高的元素将决定其他人的位置。

即在内联流程中，最高的元素将影响/移动父级的基线：

寻找解决方案

因此，如果父母的height明确，如果我们可以有一个与父母高度相同的内联孩子（全高孩子），它会影响内联流并向下移动基线：

为了使元素（包括具有下行字母的字母）保留在父元素中，我们应该垂直对齐它们vertical-align: bottom; 宣言。

10.8线高计算：'vertical-align'属性

baseline
将框的基线与父框的基线对齐。 如果该框没有基线，请将底部边缘与父母的基线对齐。

bottom
将对齐子树的底部与线框底部对齐。

把它放在一起

因此，您可以在父级中创建一个全高元素（个人而言，我宁愿使用伪元素）以将底层的标签对齐。

在这里举例

#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   */
}

---

快速示例

http://jsfiddle.net/oa2gmuq3/

如果你添加

position:absolute;
bottom:0px;

到它喜欢保持底部的标签

---

应用position:relative对于父div，并使您的标签position:absolute 。

 #contain-word-div {
 height: 100px;
 position:relative;
 }
 #contain-word-lab {
  position:absolute;
  bottom:5px;
 }

DEMO

链接地址: http://www.djcxy.com/p/41553.html

上一篇: How to align a label to the "BOTTOM" of a div in CSS?

下一篇: Vertically align an image inside a div with responsive height