如何将标签与 CSS 中 div 的“底部”对齐？
Posted
技术标签:
【中文标题】如何将标签与 CSS 中 div 的“底部”对齐？【英文标题】：How to align a label to the "BOTTOM" of a div in CSS? 【发布时间】：2014-10-14 16:28:43 【问题描述】：可以在以下位置找到演示：
http://www.bootply.com/VZ7gvA7ndE#
我将div 的高度设置为100px，并希望在div 的底部显示label。我用
#contain-word-lab
vertical-align: bottom;
margin-bottom: 5px;
但是，这根本不起作用。 label 仍然与 div 的顶部对齐。
有人对此有任何想法吗？为什么vertical-align 在这里不起作用？谢谢！
【问题讨论】：
垂直对齐：“底部”；为什么要使用双引号" "？
@KheemaPandey 一个错误，现在更正
【参考方案1】：
将其设置为位置：绝对；
#contain-word-lab
position:absolute;
bottom:5px;
【讨论】：
【参考方案2】：vertical-align 仅适用于表格单元格。如果要将元素定位在其父元素的底部，则需要给它position: absolute; 和bottom: 0;。
【讨论】：
vertical-align only applies to table cells 不正确。它适用于内联级别和表格单元格元素。
以及内联块元素。【参考方案3】：
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 */
DEMO
【讨论】：
虽然是这样，但由于OP使用的是TW Bootstrap，将列的显示类型更改为table可能会导致麻烦。
可能，但如果不担心的话，它总是可以包含在div 元素中。这是一个例子，它周围有其他divs，没有问题。 bootply.com/gmpFwz4lIn【参考方案4】：
快速示例
http://jsfiddle.net/oa2gmuq3/
如果你添加
position:absolute;
bottom:0px;
到它喜欢保持在底部的标签
【讨论】：
【参考方案5】：尝试执行以下操作
FIDDLE DEMO
#contain-word-lab
vertical-align='bottom';/***Remove This***/
bottom:2px;
position:absolute;
【讨论】：
因此它将相对于为<html> 元素建立的初始包含块进行定位。即在页面底部。【参考方案6】：
将position:relative 应用于父 div 并将您的标签设为position:absolute。
#contain-word-div
height: 100px;
position:relative;
#contain-word-lab
position:absolute;
bottom:5px;
DEMO
【讨论】：
简单的一个！！为什么我们需要相对于父母进行设置？有什么想法吗？【参考方案7】：“底部”无论如何都不起作用:) 试试bottom，不带“。
另外，您的标签也需要高度。现在使用了自动高度，这正是字体大小。我建议在您的标签中添加line-height: 100px;。
【讨论】：
【参考方案8】：为什么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）来对齐底部的标签。
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 */
【讨论】：
这是一个漂亮的小技巧，只要伪元素没问题：D 谢谢！这很有趣！你的意思是“伪元素”改变了标签的基线？有没有关于这个技巧的文档或详细说明？ @Firegun 这不是关于伪元素，而是关于垂直填充父级的任何虚拟元素，同时它也处于内联级别。 IE。一个直列全高的孩子。较高的内联元素会影响基线。 @downvoter：你真的没有理由，是吗？如果是这样，请与我们分享。 @HashemQolami 非常感谢！以上是关于如何将标签与 CSS 中 div 的“底部”对齐？的主要内容，如果未能解决你的问题，请参考以下文章
CSS：如何调整使用浮动属性和自动宽度和高度的两个 div 在底部对齐
css实现垂直顶部与底部对齐上下两端对齐heightdisplayflexwrapaligncontentspacebetweennowrapreverse
css实现垂直顶部与底部对齐上下两端对齐heightdisplayflexwrapaligncontentspacebetweennowrapreverse