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

Question

DEMO可在以下位置找到:

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

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

#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)位于其基线中.如果他们有不同的高度,最高的元素将决定其他人应该放在哪里.

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

寻找解决方案

因此,在父项具有显式的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   */
}

Answer 2

快速举例

http://jsfiddle.net/oa2gmuq3/

如果你添加

position:absolute;
bottom:0px;

它喜欢的标签保持在底部