Of all the CSS attributes that are available to web developes, the vertical-align attribute is perhaps the most mystifying. At first glance, the attribute seems like the vertical aligning cousin of the text-align attribute, but when you try and use it to vertically-centre your elements, it doesn’t work!
<div style="height:100px;background-color:#eee;"> <p style="background:#dcc;">Item to be vertically-centred</p> </div>
Item to be vertically-centred
The reason vertical-align fails in the instance above is because — like the text-align attribute — it does not work on block-level elements (elements with display:block). Unlike the text-align attribute, however, on top of working on inline and inline-block elements, the vertical-align attribute also works on table elements, albeit in a different way.
In this article, we will only be exploring how the vertical-align attribute interacts with inline and inline-block elements. If you are looking to use vertical-align to align non-inline elements, then you’ll want to click on the aforementioned link.
- Possible
vertical-alignpositions - Constant-value offsets for
vertical-align - Additional information
- Conclusion
1. Possible vertical-align positions
The most common use-case of vertical-align is for setting the vertical positioning of inline elements relative to each other.
a. vertical-align: baseline
By default (i.e if the vertical-align attribute is not set for inline or inline-block elements), all inline and inline-block elements will be vertically-aligned to the baseline of their parent; but what is the baseline?
In short, the baseline refers to the line that the words in an inline element naturally align themselves to. In the example below, the baseline is the blue line at the bottom. Notice also that the <img> element, being an inline element, naturally also aligns itself to the baseline by default.
<section><img src="https://placekitten.com/100/100"/>baseline text.</section>
Article continues after the advertisement:
b. vertical-align: top / bottom / middle
To shift the position of inline and inline-block elements relative to each other, we can apply the top, bottom or middle attributes to them. In the examples below, the blue line shows where the alignment for the vertically-aligned <img> element is.
Note that when working with the vertical-align attribute (as with the examples shown below), we usually apply the CSS attribute to the tallest element in the line. You can flout this rule, but this can lead to some weird alignment behaviour that we will explore later on in the article.
vertical-align: top
<section><img src="https://placekitten.com/100/100" style="vertical-align:top;"/>vertical-align: top</section>
vertical-align: bottom
<section><img src="https://placekitten.com/100/100" style="vertical-align:bottom;"/>vertical-align: bottom</section>
vertical-align: middle
<p><img src="https://placekitten.com/100/100" style="vertical-align:middle;"/>vertical-align: middle</p>
c. vertical-align: text-top / text-bottom
These behave similarly to top, bottom and middle, with the exception that they do not take line-height into account when aligning themselves, unlike the top and bottom attributes, which do. In the examples below, the line-height of the text elements have been set to 36px, and are denoted by the orange line:
vertical-align: text-top
<section style="line-height:36px;"><img src="https://placekitten.com/100/100" style="vertical-align:text-top;"/>vertical-align: text-top</section>
<section style="line-height:36px;"><img src="https://placekitten.com/100/100" style="vertical-align:top;"/>vertical-align: top</section>
vertical-align: text-bottom
<section style="line-height:36px;"><img src="https://placekitten.com/100/100" style="vertical-align:text-bottom;"/>vertical-align: text-bottom</section>
<section style="line-height:36px;"><img src="https://placekitten.com/100/100" style="vertical-align:bottom;"/>vertical-align: bottom</section>
d. vertical-align: sub / super
These 2 vertical-align values will align an element to the subscript or superscript positions of the adjacent text. In HTML, it is possible to use <sub> and <sup> to write subscript and superscript text respectively.
Subscripts
<p>Sodium carbonate is Na<sub>2</sub>Cl<sub>3</sub>.</p>
Sodium carbonate is Na2Cl3.
Superscripts
<p>z<sup>2</sup> = x<sup>2</sup> + y<sup>2</sup></p>
z2 = x2 + y2
When vertical-align is set to sub or super, the element is thus aligned to the baseline of where the subscript or superscript text will be.
vertical-align: sub
<section><img src="https://placekitten.com/100/100" style="vertical-align:sub;"/>vertical-align: <sub>sub</sub></section>
vertical-align: super
<section><img src="https://placekitten.com/100/100" style="vertical-align:super;"/>vertical-align: <sup>super</sup></section>
Article continues after the advertisement:
2. Constant-value offsets for vertical-align
Instead of entering a text value to set the vertical-align attribute, you can also put in either a length value (such as em, px and the like), or a percentage value.
a. Length values
By setting the vertical-align attribute to a specific length, you can determine how much the set element will offset from the baseline of the rest of the text. In such a case, both positive and negative values can be used, to set the element above or below the baseline respectively.
The offest for these values will always be relative to the baseline, as there is no way to set both a text position and a numeric offset.
You can use any unit that is typically used in CSS, such as em, px, rem etc. Below are some examples using the em and px units.
Positive offset value
<section><img src="https://placekitten.com/100/100" style="vertical-align:2em;"/> vertical align of 2em</section>
Negative offset value
<section><img src="https://placekitten.com/100/100" style="vertical-align:-20px;"/> vertical align of -20px</section>
b. Percentage values
Putting a percentage value will offset the element by a percentage of the line-height of the current line height. We have a section below explaining the line-height attribute, but for now, here’s an example using a percentage value.
The orange line represents the line height of the text, while the green line represents the offset value. Both lines have the same length: the line height of the inline element.
<section style="line-height:2em;"><img src="https://placekitten.com/100/100" style="vertical-align:100%;"/> vertical align of 100%</section>
Note that the line height of the above example is inherited from the parent <p> tag. All elements within will automatically have a line height of 2em, i.e. 200% of the paragraph’s font size.
3. Additional information
In this section, we explore the concepts, attributes and weird kinks that may affect how vertical-align behaves.
a. What is line-height?
line-height is a CSS attribute that is relatively important for certain vertical-align values. Hence, it is important to know what it is. Simply put, line-height determines the amount of space a line of text takes up.
<p style="line-height:1em;">This text has a line height of 1em, or 100% of the font size. This means that the text is relatively closely-packed, without much room in between lines.</p>
This text has a line height of 1em, or 100% of the font size. This means that the text is relatively closely-packed, without much room in between lines.
<p style="line-height:1em;">This text has a line height of 1em, or 100% of the font size. This means that the text is relatively closely-packed, without much room in between lines.</p>
This text has a line height of 2em, or 100% of the font size. This means that between 2 lines of text, there is spacing equal to 100% of the font size.
b. More on vertical-align: baseline
Whenever inline or inline-block elements are laid next to each other, a baseline for each line will be determined by the browser, based on the height of all the different elements that are within. In the example below, we have multiple differently-sized elements in the paragraph, all aligned to a baseline.
<p><img src="https://placekitten.com/100/100"> Regular text. <span style="font-size:2em;">Larger text.</span><br>This is another line with a different baseline from the first line.</p>
Regular text. Larger text.
Another line with a different baseline from the first line.
Article continues after the advertisement:
c. Alignment of <form> elements with vertical-align
The vertical-align attribute can be used very effectively to align horizontally-flowing forms, as form elements like checkboxes, text fields and such are inline elements that can be vertically-aligned. Refer to the example below:
<form> <label for="form-field">Checkbox label:</label> <input type="checkbox" id="form-field"/> </form>
Notice that by default, the checkbox element is slightly off-centre vertically. This can be fixed by setting both the <label> and the checkbox to have middle as the vertical-align value.
<form> <label for="form-field" style="vertical-align:middle;">Checkbox label:</label> <input type="checkbox" id="form-field" style="vertical-align:middle;"/> </form>
There are many more applications of using vertical-align on <form> elements to vertically-align and organise forms. If you would like an article further exploring this, do let us know in the comments below!
Conclusion
In a following article, we will be exploring how we can use vertical-align to vertically align our elements (instead of just text). On top of that, we will also be exploring how we can use other HTML and CSS constructs (aside from vertical-align) to centre our elements.
Are you struggling with a problem on getting vertical-align to work the way you want it to? As vertical-align is an attribute that has many complex interactions and many use-cases, we are looking for case studies to do more articles on this attribute. Hence, if you have a question regarding vertical-align, please leave it for us in the comments below! If it is something that we haven’t explored in our articles, we will do one to answer your question.
Special thanks to placekittens.com for providing the kitten images in this post! No kittens were harmed in the making of this article.
Just commenting to say what a great resource this is. Thanks for breaking down vertical-align, it was driving me crazy with how it was behaving.