Aligning elements vertically is a lot different from aligning them horizontally. There are a few different ways we can align elements horizontally, or center elements horizontally, either using the margin properties or the text align properties or some complicated combination of one of those and some tricky jQuery. There is one best way to align HTML elements vertically, however, and it is by using the vertical align property.
The vertical align property can be used to tell your elements where they need to vertically line up on the page in relation to their surrounding elements. The property takes several different values, which include:
- baseline: this is the default, and will vertically align and element with the baseline (bottom) of its parent element
- sub: this will align the element to its parent as if it were subscript
- super: similar to sub, this will align the element to its parent as if it were superscript
- top: this aligns the element with the top line of its parent
- text-top: this aligns the element with the top line of its parents text
- middle: this will align the element with the middle of the parent element
- bottom: this will align the element with the bottom line of the parent element
- text-bottom: this aligns the element with the bottom line of its parents text
- “length”: move the element around vertically by assigned a fixed length to the property in px, ems, or %.
A really common way that the vertical align property is used is in relation to images. Let’s say you have an image and a line of text and you want them to stack up next to each other without using the float property, so you force the text to display inline rather than as a block-level element. You’ll end up with something that looks a lot like this:
Almost what we’re going for…but not quite. Here’s where the vertical-align property comes in. With just one simple line of code, we can get that text to align with the top of the image. Check it out below:
p{
vertical-align: top;
}
After the code above is applied, your page should now look like the screenshot below:
As you can see, the text is now vertically aligned with the top of the image, which is its parent element. Now that you understand the basics of how to use the vertical-align property, be sure to play around with it when writing your own code.