可以在以下位置找到演示：
http://www.bootply.com/VZ7gvA7ndE#
我将div 的高度设置为100px，并希望在div 的底部显示label。我用
#contain-word-lab {
vertical-align: bottom;
margin-bottom: 5px;
}
但是，这根本不起作用。 label 仍然与 div 的顶部对齐。
有人对此有任何想法吗？为什么vertical-align 在这里不起作用？谢谢！
【问题讨论】：
" "？
标签： html css twitter-bootstrap vertical-alignment
将其设置为位置：绝对；
#contain-word-lab {
position:absolute;
bottom:5px;
}
【讨论】：
vertical-align 仅适用于表格单元格。如果要将元素定位在其父元素的底部，则需要给它position: absolute; 和bottom: 0;。
【讨论】：
vertical-align only applies to table cells 不正确。它适用于内联级别和表格单元格元素。
vertical-align 往往在容器是类似表格/表格的元素（例如table、tr、td、th）或内联文本元素（例如span）时工作得最好。但是，因为用于布局的 table 元素并不是一个好主意。我们可以使用display:table; 和display:table-cell; css 属性使其他元素像它们一样工作。
尝试应用以下 css：
#contain-word-div {
height: 100px;
border: 1px solid black; /* added just for visualising position */
display:table;
}
#contain-word-lab {
display:table-cell;
vertical-align: bottom;
padding-bottom: 5px; /* use padding to give the label more height rather than trying to push the "cell" upwards */
}
【讨论】：
table可能会导致麻烦。
div 元素中。这是一个例子，它周围有其他divs，没有问题。 bootply.com/gmpFwz4lIn
【讨论】：
尝试执行以下操作
#contain-word-lab {
vertical-align='bottom';/***Remove This***/
bottom:2px;
position:absolute;
}
【讨论】：
<html> 元素建立的初始包含块进行定位。即在页面底部。
将position:relative 应用于父 div 并将您的标签设为position:absolute。
#contain-word-div {
height: 100px;
position:relative;
}
#contain-word-lab {
position:absolute;
bottom:5px;
}
【讨论】：
“底部”无论如何都不起作用:) 试试bottom，不带“。
另外，您的标签也需要高度。现在使用了自动高度，这正是字体大小。我建议在您的标签中添加line-height: 100px;。
【讨论】：
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
将框的基线与父框的基线对齐。如果框没有基线，则对齐底部 与父级基线的边距。
bottom
将对齐的子树的底部与行框的底部对齐。
因此，您可以在父级中创建一个全高元素（我个人更愿意使用pseudo-elements）来对齐底部的标签。
#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 */
}
【讨论】：