Tailwind 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 Tailwind 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>

Preview

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