
How to Vertically Align Text in CSS
Having trouble aligning text vertically with CSS? All you need to do is use the vertical-align
property. Works for tables as well:
<style>
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
</style>
<table border="1">
<tbody>
<tr>
<td class="top">I'm at the top</td>
<td class="middle">I'm in the middle</td>
<td class="bottom">I'm at the bottom</td>
</tr>
</tbody>
</table>
Copied to clipboard!
The above example, wil produce the following:
I'm at the top | I'm in the middle | I'm at the bottom |
Apart from the three values, it can also take the value of:
baseline
: it's initial value, the element is aligned to the baseline of its parent.sub
: Aligns the elements to the subscript-baseline of its parent.super
: Aligns the elements to the superscript-baseline of its parent.text-top
: Aligns the top of the element with the top of its parent element's font.text-bottom
: Aligns the bottom of the element with the bottom of its parent element's font.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.


Resources:

Tired of looking for tutorials?
You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.
Check out our interactive course to master JavaScript in less time.
Learn MoreRecommended
