Tailwind CSS Vertical Align

The vertical-align utility class in Tailwind CSS allows you to control the vertical alignment of inline or inline-block elements. With Tailwind's vertical-align class, you can easily adjust the vertical position of elements within their containing elements.

Applying Vertical Align

To apply a specific vertical alignment to an element, you can use the align-{value} utility class, where {value} represents the desired vertical alignment. Here are some common values you can use:

• align-baseline: Aligns the element's baseline with the baseline of its parent.
• align-top: Aligns the element's top edge with the top edge of its parent.
• align-middle: Aligns the element vertically in the middle of its parent.
• align-bottom: Aligns the element's bottom edge with the bottom edge of its parent.
• align-text-top: Aligns the element's top edge with the top edge of the parent's text.
• align-text-bottom: Aligns the element's bottom edge with the bottom edge of the parent's text.

<div class="align-middle">
  <!-- Content here -->
  On a bright sunny day, as the gentle breeze rustled the leaves on the trees, Sarah walked along
  the winding path in the park. The vibrant colors of the flowers caught her attention, filling her
  heart with joy. Birds chirped happily in the distance, creating a melodious symphony of nature.
  Sarah took a deep breath, inhaling the sweet scent of blooming roses, and felt a sense of
  tranquility wash over her
</div>

Preview

Responsive Vertical Align

Tailwind CSS allows you to apply vertical align classes responsively at different breakpoints. To use responsive vertical align classes, you can append the breakpoint prefix to the utility class. For example, md:align-top aligns the element's top edge with the top edge of its parent starting from the medium breakpoint and above.

<div class="align-bottom md:align-middle">
  <!-- Content here -->
</div>

In the above example, the vertical alignment of the <div> element is set to align at the bottom by default (align-bottom), but starting from the medium breakpoint and above, it changes to align in the middle (md:align-middle).

Tailwind Vertical Align Class Table

Windframe Tailwind blocks

landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.