How to align a label to the "BOTTOM" of a div in CSS?
Solution 1
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.
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.
#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 */
}
Solution 2
quick example
if you add
position:absolute;
bottom:0px;
to the label it likes to keep it at the bottom
Solution 3
Apply position:relative
to the parent div and make your label as position:absolute
.
#contain-word-div {
height: 100px;
position:relative;
}
#contain-word-lab {
position:absolute;
bottom:5px;
}
Solution 4
set it as position:absolute;
#contain-word-lab {
position:absolute;
bottom:5px;
}
Solution 5
vertical-align
tends to work best when the containers are table/table-like elements (eg. table
, tr
, td
, th
) or inline text elements (eg span
). However, because table
elements 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.
Try applying the following 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 */
}
Comments
-
Hanfei Sun almost 2 years
DEMO can be found at:
http://www.bootply.com/VZ7gvA7ndE#
I set the height of
div
to 100px and want to show thelabel
at the bottom of thediv
. 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 thediv
.Does anyone have any ideas about this? Why
vertical-align
doesn't work here? Thanks!