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>

The above example, wil produce the following:

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.

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The vertical-align property in CSS