How to Vertically Align Text in CSS

How to Vertically Align Text in CSS

Ferenc Almasi • 2020 November 23 • 📖 2 min read

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>
vertical-align.html
Copied to clipboard!

The above example, wil produce the following:

I'm at the topI'm in the middleI'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.
How to vertically align text in CSS
If you would like to see more Webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript
10 Best Practices for Quickly Improving Your CSS

Resources:

JavaScript Course Dashboard

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 More

Recommended

Ezoicreport this ad