Tailwind CSS Align Items

The align-items utility class sets the vertical alignment of flex items within a container. It can be used with the flexbox classes to position items within a flex container.

Syntax

<div class="flex align-items-{value}">
  ...
</div>

• value: This can be one of the following:
  • start - Align items to the start of the container.
  • end - Align items to the end of the container.
  • center - Align items at the center of the container.
  • baseline - Align items at the baseline of the container.
  • stretch - Stretch items to fill the container.

Example

<div class="flex align-items-center">
  <div class="bg-gray-200 h-8 w-8 rounded-full"></div>
  <div class="bg-gray-400 h-8 w-8 rounded-full"></div>
  <div class="bg-gray-600 h-8 w-8 rounded-full"></div>
</div>

Output

Explanation

In this example, we have a flex container with three child elements (divs). We have applied the align-items-center class to the container to vertically center the child elements within it.

Use

The align-items utility class is used to control the vertical alignment of items inside a flex container.

Important Points

• The align-items utility class only works in a flex container.
• The default value for align-items is stretch.
• The start and end values align items to the start and end of the container, respectively, based on the flex-direction property.
• The center value centers the items vertically in the container.
• The baseline value aligns items to their baselines.
• The stretch value stretches items to fill the container vertically.

Summary

The align-items utility class is used to control the vertical alignment of items inside a flex container. It allows you to align items to the start, end, center, baseline, or stretch them to fill the container vertically. The default value is stretch.