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>
vertical-align.html
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

Resources:

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 Read more on
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.