Imagine trying to put a small image inside a paragraph and align its base with the bottom of the text. Or put it at the same level as the subscript or superscript. You can set up a whole table or a little flexbox container to achieve this result. But these approaches wouldn't be very convenient, and would definitely be too complicated in this instance.
In this topic, you will learn about the vertical-align property, which makes it possible to align inline items in a much simpler way.
Typographic units
As explained in the introduction, the vertical-align property allows us to vertically align items inside their parents. It can only be used with inline elements and has ten possible values. These depend on the so-called typographic values, which we will take a look at first:
| The very bottom of the text, beneath the lowest element of the subscript |
| Baseline of the subscript |
| Baseline of the text |
| Baseline of the superscript |
| Top of the text |
| Line height |
Vertical-align values
Let’s focus on the precious vertical-align property itself now. The most common misconception is that it can be used to align anything. Beginners often make this mistake and get confused when nothing seems to work. The thing to remember is that this property only works with inline elements and is applied to the item itself, not the parent.
The ten vertical-align property values can be seen below:
baseline— default valuesubsupertext-toptext-bottommiddletopbottomValue in measurement units
Percentage value
In the following sections, we’ll take a look at each one in turn.
Baseline
vertical-align: baseline is the default value of the property. It aligns the bottom of an item with its parent’s baseline. Here’s a quick example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertical-align</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p><img src="https://clck.ru/WS2fL" alt=""> This is a <sub>subscript</sub> and this is a <sup>superscript</sup></p>
</div>
</body>
</html>.container {
align-items: center;
background: #f5f5f5;
font-family: 'Montserrat', sans-serif;
font-size: 4em;
height: 100vh;
justify-content: center;
width: 100vw;
}
.container img {
vertical-align: baseline;
}And this is the result:
Sub and super
vertical-align: sub places the bottom of the item in line with the baseline of the subscript:
.container img {
vertical-align: sub;
}vertical-align: super aligns the bottom of the item with the baseline of the superscript. It's as easy as that!
.container img {
vertical-align: super;
}Text-top and text-bottom
vertical-align: text-top will align the top of an item with the very top of the superscript:
.container img {
vertical-align: text-top;
}The pattern is probably becoming clear by now!
vertical-align: text-bottom puts the bottom of the item on the same level as the bottom of the text. Don’t confuse this value with the sub value. Though the result in both cases might look the same, sub aligns the item with the baseline of the subscript, while text-bottom aligns it with the bottom of the text:
.container img {
vertical-align: text-bottom;
}Top, middle, and bottom values
vertical-align: top, vertical-align: middle, and vertical-align: bottom align the item with the top, middle, and bottom of the line respectively. These values don't depend on the text or its size, they depend on the line-height.
In the following code sample, line-height is set to 250px and there is a border around the line itself so that it's easier to see:
.container p {
border: 3px solid #a0a0a0;
line-height: 250px;
}
.container img {
vertical-align: bottom;
}As shown below, the top and middle values will also give you a predictable result:
.container p {
border: 3px solid #a0a0a0;
line-height: 250px;
}
.container img {
vertical-align: top;
}.container p {
border: 3px solid #a0a0a0;
line-height: 250px;
}
.container img {
vertical-align: middle;
}Values in measurement units
You can also use measurement units as values of the vertical-align property. In this case, the value will define the distance between the bottom of the item and the parental baseline. Here’s an example:
.container img {
vertical-align: 50px;
}It’s also possible to use negative values if you want the block to be lower than the parental baseline:
.container img {
vertical-align: -50px;
}Percentage values
And the cherry on top of this cake is the percentage values. They allow you to set the distance between the element and the parental baseline as a percentage of the line-height. In this code sample, the distance will be 50px since it's 10% of the line-height. Take a look:
.container p {
border: 1px solid black;
line-height: 500px;
}
.container img {
vertical-align: 10%;
}Summary
We've used an image as an example for all the values, though it's also possible to vertically align any item with display: inline or display: inline-block. So don't think that this value is a universal alignment tool. It's very helpful, but only in certain cases. With high accuracy, of course: ten possible values of this property are giving developers an opportunity to make a very detailed set-up.