πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Vertically Align Text in CSS

How to Vertically Align Text in CSS

Ferenc Almasi β€’ 2020 November 23 β€’ Read time 2 min read
  • twitter
  • facebook
CSS

Having trouble aligning text vertically with CSS? All you need to do is use the vertical-align property. Works for tables as well:

Copied to clipboard! Playground
<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

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

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

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.