如何将标签对齐到“BOTTOM” CSS中的div？ [英] How to align a label to the "BOTTOM" of a div in CSS?

问题描述

DEMO可在以下网址找到：

，如果我们可以有一个内联的子项与父项完全相同的高度height child），它会影响内联流并将基线向下移动：

为了保持父元素（包括具有下降符的字母） a 垂直对齐 vertical-align：bottom; / a>。

10.8线高计算：'vertical-align'property

baseline

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

code>

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








整合

因此，您可以创建一个全高度元素（个人我宁愿用伪元素），以便将标签对齐到底部。

这里的例子

 ＃contain-word-div：after {
 content：; 
 display：inline-block; 
 height：100％; / *让它和父对象的高度一样* / 
 vertical-align：bottom; / *将底部的元素对齐* / 
} 
 
＃contains-word-lab {
 display：inline-block; 
 vertical-align：bottom; / *对齐底部的元素* / 
} 
  

DEMO can be found at:

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

I set the height of div to 100px and want to show the label at the bottom of the div. I use

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

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

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

解决方案

Why vertical-align: bottom is not working alone

Since the height of the parent element is greater than the computed height of the label, Using vertical-align: bottom won't move that inline element to the bottom of the parent.

Because in an inline flow, vertical-align determines 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.

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

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:

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

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.

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

这篇关于如何将标签对齐到“BOTTOM” CSS中的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！