Open In App
Related Articles

Tailwind CSS Vertical Alignment

Improve Article
Save Article
Like Article

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS vertical-align property. This class is used to specify the vertical alignment of the table-box or inline element.

Vertical Alignment classes:

  • align-baseline: It aligns the element baseline corresponding to the baseline of the parent. This might vary according to the browser. It is the default value.
  • align-top: Aligns the element’s top corresponding to the top of the tallest element on its line.
  • align-middle: Aligns the element’s middle corresponding to the middle of the parent.
  • align-bottom: Aligns the element’s bottom corresponding to the top of the shortest element on its line.
  • align-text-top: It aligns the element top corresponding to the top of the parent’s font.
  • align-text-bottom: Align the element’s bottom corresponding to the bottom of the parent’s font.


<element class="align-{Vertical Alignment}">...</element>



<!DOCTYPE html> 
    <link href=
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
    <b>Tailwind CSS Text Overflow Class</b
    <div class="mx-4 h-24 rounded-lg grid grid-cols-2 text-left ">
        <img src
             class="inline-block align-baseline">
        <img src
             class="inline-block align-top">
        <img src
             class="inline-block align-middle">
        <img src
             class="inline-block align-bottom">
        <img src
             class="inline-block align-text-top">
        <img src
             class="inline-block align-text-bottom">


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 23 Mar, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials