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.

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

---

10 Best Practices for Quickly Improving Your CSS

Building scalable and manageable stylesheets

CSS 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

Resources:

• The vertical-align property in CSS