如何将标签与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 将将该（内联）元素移动到父元素的底部。< / p>

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

默认情况下，内嵌级元素（inline，inline-block）位于 baseline 中。如果它们具有不同的高度，那么最高的元素将决定其他元素的放置位置。

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

寻找解决方案

因此，在the parent has an explicit height的情况下，如果我们的内联子项与父项（全高子项）具有完全相同的高度，则会影响内联流并将基线向下移动： / p>

为了在父母中保留元素（包括具有下行字母的字母），我们应该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   */
}

Answer 2

快速示例

http://jsfiddle.net/oa2gmuq3/

如果你添加

position:absolute;
bottom:0px;

到它喜欢的标签底部

Answer 3

将其设置为position：absolute;

#contain-word-lab {
  position:absolute;
  bottom:5px;
}

Answer 4

将position:relative应用于父div，并将您的标签设为position:absolute。

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

DEMO

Answer 5

当容器是类似于表/类的元素时，

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

Answer 6

vertical-align仅适用于表格单元格。如果您想将元素放在其父元素的底部，则需要将其设为position: absolute;和bottom: 0;。

Answer 7

尝试执行以下操作

<强> FIDDLE DEMO

#contain-word-lab {
    vertical-align='bottom';/***Remove This***/
    bottom:2px;
    position:absolute;
}

Answer 8

“底部”无论如何都行不通:)只需bottom，不用“。 另外你的标签也需要一个高度。现在使用自动高度，这正是字体大小。我建议在您的标签上添加line-height: 100px;。