Tailwind CSS Align Content

The align-content utility in Tailwind CSS is used to set the vertical alignment of the content within a grid or flex container.

Syntax

<div class="align-content-{value}">
  <!-- Content -->
</div>

• {value}: It specifies the alignment value for the content vertically. It can be one of the following values:
  • start: Aligns the content at the top of the container
  • end: Aligns the content at the bottom of the container
  • center: Centers the content vertically
  • between: Distributes the content evenly with equal space between them
  • around: Distributes the content evenly with equal space around them
  • evenly: Distributes the content evenly with equal space between and around them

Example

<div class="flex flex-wrap h-64 align-content-center">
  <div class="w-32 h-32 bg-red-500"></div>
  <div class="w-32 h-32 bg-green-500"></div>
  <div class="w-32 h-32 bg-blue-500"></div>
  <div class="w-32 h-32 bg-yellow-500"></div>
  <div class="w-32 h-32 bg-purple-500"></div>
  <div class="w-32 h-32 bg-orange-500"></div>
</div>

Output

Explanation

The above example aligns the containers in the center of the parent container using the align-content-center utility. The parent container also has flex-wrap class that wraps the child containers onto multiple lines if there is not enough space.

Use

Use the align-content utility to align the content of a grid or flex container vertically.

Important Points

• The align-content utility only works on a container with display: flex or display: grid.
• It sets the vertical alignment of all the child elements within the container.

Summary

• Use the align-content utility to set the vertical alignment of the content within a grid or flex container.
• The value can be one of start, end, center, between, around, or evenly.