Align text to absolute bottom of parent container?

HTML & CSS
1

Take a look at the attached pic for an example of what I’m trying to achieve. I’m not sure how to accurately describe the effect.

What I’m trying to do is to achieve the same effect you see here where the baseline of the text is sitting right on top of the sibling container.

I’ve tried to set a vertical-align property on the parent container, to no avail.

2

I’ve tried to set a vertical-align property on the parent container, to no avail.
Hi Scott,
Vertical alignment is one of the trickier things about css. First thing to understand is that it only applies to inline elements and tables. The vertical-align property would need to be set on an inline child of the parent and it would only show an effect if it was beside another inline box.

Other things to consider is that line-height will have an effect as well. Generally speaking the default line-height is 1.2, when there is not a unit after the value it is treated as a multiplier. That would be 1.2 X font-size. That is done to make room for text descenders such as the stem of a “p” or a “j”

There is a very simple way that you can achieve your desired result, you could simply lift the sibling block up with a negative top margin. The most accurate way to do that would be with px on both negative margin and font-size of the text above. You may need to set position:relative on the block to layer it above the inline box if it has any BG properties on it.

You can also set a smaller line-height on your text to kill the text descender space along with v-a:bottom. That is normally not recommended but in a case like this where it is just one string of text that does not wrap it would work. I used that in my last example with inline-block.

I have set up a test case for you, maybe it will help you see how the v-a property works.
http://www.css-lab.com/lab-work/v-align-text.html

You will have to pay attention to the different class names I set on the three different examples.

Hope that helps :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vertical-Aligning Text</title>

<style type="text/css">
.wrap {
width:500px;
margin:50px auto 0;
}
h1 {
font-size:1.5em;
text-align:center;
}
p {
margin:0;
background:red;
text-align:center;
}
p b {
font:30px/1.5 arial;
text-decoration:underline;
}
p span {
font:24px/1.2 arial;
vertical-align:bottom;
text-decoration:underline;
background:yellow;
}
p em {
font:18px/1.2 arial;
vertical-align:top;
text-decoration:underline;
}
div.block {
min-height:50px;
background:green;
color:#FFF;
}
div.up {
margin-top:-7px;
position:relative;/*stack above span inline box*/
}

.noline {text-decoration:none;}

.in-block {
display:inline-block;
font:24px/16px arial;/*reduced line height*/
vertical-align:bottom;
text-decoration:none;
}

.last p b {
display:inline-block;
font:20px/24px arial;
text-decoration:none;
}
</style>

</head>
<body>
<h1>Vertical-Aligning Text</h1>

<div class="wrap">
    <p><b>baseline text</b>&nbsp; <span>bottom text</span>&nbsp; <em>top text</em></p>
    <div class="block">No margin on this div</div>
</div>

<div class="wrap">
    <p><b>baseline text</b>&nbsp; <span class="noline">bottom text</span>&nbsp; <em>top text</em></p>
    <div class="block up">Negative top margin on this div</div>
</div>

<div class="wrap last">
    <p><b>&nbsp;</b><span class="in-block">inline-block v-a:bottom</span><b>&nbsp;</b></p>
    <div class="block">No margin on this div<br> inline-block span with reduced line-height</div>
</div>
</body>
</html>
3

Thanks Rayzur. Excellent example and great teaching.