Html 如何在 CSS 中将标签与 div 的“底部”对齐？

How to align a label to the "BOTTOM" of a div in CSS?

提问by Hanfei Sun

DEMO can be found at:

可以在以下位置找到演示：

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

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

I set the height of divto 100px and want to show the labelat the bottom of the div. I use

我将 的高度设置div为 100px 并希望label在div. 我用

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

However, this doesn't work at all. The labelstill align to the top of the div.

然而，这根本行不通。将label仍然对齐的顶部div。

Does anyone have any ideas about this? Why vertical-aligndoesn't work here? Thanks!

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

回答by Hashem Qolami

Why vertical-align: bottomis not working alone

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

Since the height of the parent element is greater than the computed height of the label, Using vertical-align: bottomwon'tmove that (inline) element to the bottom of the parent.

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

Because in an inline flow, vertical-aligndetermines how the elements are positioned based on their parent's baseline; And using that property on the label won't alter the position of baseline of its parent.

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

Inline level elements (inline, inline-block) are sitting in their baselineby default. And if they have different heights, the tallest element will determine where the others whould be placed.

默认情况下inline，内联级别元素 ( , inline-block) 位于其基线中。如果它们的高度不同，最高的元素将决定其他元素的放置位置。

I.e. In an inline flow, the tallest element will affect/move the baseline of the parent:

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

Looking for a solution

寻找解决方案

Hence in cases where the parent has an explicit height, if we could have an inline child which has the exact same height as the parent (a full-height child), it would affect the inline flow and move the baseline down:

因此，在父级具有显式 的height情况下，如果我们可以有一个与父级（全高子级）具有完全相同高度的内联子级，它将影响内联流并将基线向下移动：

And in order to keep elements (including letters having descenders) within the parent, we should align them vertically by vertical-align: bottom;declaration.

并且为了将元素（包括具有下行的字母）保留在父级中，我们应该通过vertical-align: bottom;声明将它们垂直对齐。

10.8 Line height calculations: 'vertical-align' property

baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

bottom
Align the bottom of the aligned subtree with the bottom of the line box.

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

baseline
将框的基线与父框的基线对齐。如果框没有基线，则将底部边距边缘与父项的基线对齐。

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

Putting it all together

把这一切放在一起

Therefore you could create a full-height element (Personally I'd rather go with pseudo-elements) within the parent to align the label at the bottom.

因此，您可以在父元素中创建一个全高元素（我个人更愿意使用伪元素）来对齐底部的标签。

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

回答by C Williams

quick example

快速示例

http://jsfiddle.net/oa2gmuq3/

http://jsfiddle.net/oa2gmuq3/

if you add

如果你添加

position:absolute;
bottom:0px;

to the label it likes to keep it at the bottom

到它喜欢把它放在底部的标签

回答by code addict

set it as position:absolute;

将其设置为位置：绝对；

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

回答by Suresh Ponnukalai

Apply position:relativeto the parent div and make your label as position:absolute.

应用于position:relative父 div 并使您的标签为position:absolute.

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

DEMO

演示

回答by haxxxton

vertical-aligntends to work best when the containers are table/table-like elements (eg. table, tr, td, th) or inline text elements (eg span). However, because tableelements for layout are not a good idea. We can make other elements function like them using the display:table;and display:table-cell;css properties.

vertical-align当容器是类似表格/表格的元素（例如table、tr、td、th）或内联文本元素（例如span）时，往往效果最佳。但是，因为table布局元素不是一个好主意。我们可以使用display:table;和display:table-cell;css 属性使其他元素的功能与它们类似。

Try applying the following 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

演示

回答by Stephan Weinhold

The "bottom" won't work anyway :) Try just bottom, without ". Plus your label needs a height too. Now it's auto height is used and this is exactly the font-size. I'd suggest adding a line-height: 100px;to your label.

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

回答by recursive

vertical-alignonly applies to table cells. If you want to position an element at the bottom of its parent, you need to give it position: absolute;and bottom: 0;.

vertical-align仅适用于表格单元格。如果你想将一个元素定位在其父元素的底部，你需要给它position: absolute;和bottom: 0;。

回答by Richa

Try to do following

尝试做以下

FIDDLE DEMO

小提琴演示

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