I am currently using blueprint css framework. I have vertical align text inside the div to stick to the baseline(bottom) of the div.

<div>content goes here <div class="label">label</div></div>

I want the content and label to stick to bottom of the div and not float in the middle(vertical-align).

I appreciate any help.


2 answers

Ktash 1851

Vertical align is not about the position in the div, but the position of an inline element to other elements in the line. For example, if you have an image inline that is larger than the text, and you set the vertical align on it to be text-top, then the text will align with the top of the image.

What you are looking for is position. There are a number of ways to do this, including position: relative with a wrapper around the content you want, and a position: absolute; bottom: 0px; as demo'd above. Or, you could also simply add padding to the top of the element, setting the size of the text and line-height to be a certain size to get the desired size/effect. There are a few other ways, and really it comes down to what works best for your situation.

Answered over 8 years ago by Ktash