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:

    .top    { vertical-align: top; }
    .middle { vertical-align: middle; }
    .bottom { vertical-align: bottom; }

<table border="1">
            <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>
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:

How to vertically align text in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS


Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.