Tailwind CSS Vertical Alignment - GeeksforGeeks

23 Mar, 2022
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.
Syntax:
<element class="align-{Vertical Alignment}">...</element>
Example:
HTML
<!DOCTYPE html> <html><head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Text Overflow Class</b>     <div class="mx-4 h-24 rounded-lg grid grid-cols-2 text-left ">            <p>        <img src = "https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"              class="inline-block align-baseline">             align-baseline      </p>              <p>        <img src = "https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"              class="inline-block align-top">             align-top      </p>              <p>        <img src = "https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"              class="inline-block align-middle">             align-middle      </p>              <p>        <img src = "https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"              class="inline-block align-bottom">             align-bottom      </p>              <p>        <img src = "https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"              class="inline-block align-text-top">             align-text-top      </p>              <p>        <img src = "https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"              class="inline-block align-text-bottom">             align-text-bottom      </p>      </div></body>   </html> 
Output:
Tailwind CSS
Tailwind-Typography
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?