Align Items

Controls how flex or grid items are aligned along the cross axis of their container. In a flex row layout, this governs vertical alignment; in a flex column layout, this controls horizontal alignment. This utility is essential for controlling how items align in relation to each other within a row or column. In Tailwind v4, align utilities have improved compatibility with logical properties for better RTL support.

Flexbox & Grid1 variant7 examples

Official Docs Open Playground

Basic usage:

<div class="flex items-start h-32 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Short</div>
  <div class="bg-blue-200 p-8 rounded">Medium</div>
  <div class="bg-blue-300 p-12 rounded">Tall</div>
</div>

Examples

Items aligned to the top of the container

<div class="flex items-start h-32 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Short</div>
  <div class="bg-blue-200 p-8 rounded">Medium</div>
  <div class="bg-blue-300 p-12 rounded">Tall</div>
</div>

Edit in playground

Items aligned to the vertical center of the container

<div class="flex items-center h-32 bg-gray-100 p-4 rounded-lg">
  <div class="bg-green-100 p-4 rounded">Short</div>
  <div class="bg-green-200 p-8 rounded">Medium</div>
  <div class="bg-green-300 p-12 rounded">Tall</div>
</div>

Edit in playground

Items aligned to the bottom of the container

<div class="flex items-end h-32 bg-gray-100 p-4 rounded-lg">
  <div class="bg-purple-100 p-4 rounded">Short</div>
  <div class="bg-purple-200 p-8 rounded">Medium</div>
  <div class="bg-purple-300 p-12 rounded">Tall</div>
</div>

Edit in playground

Items aligned by their baselines

<div class="flex items-baseline h-32 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 text-3xl rounded">Large</div>
  <div class="bg-blue-200 p-4 rounded">Normal</div>
  <div class="bg-blue-300 p-4 text-sm rounded">Small</div>
</div>

Edit in playground

Items stretched to fill the container's height

<div class="flex items-stretch h-32 bg-gray-100 p-4 rounded-lg">
  <div class="bg-green-100 p-4 rounded">Stretch</div>
  <div class="bg-green-200 p-4 rounded">to</div>
  <div class="bg-green-300 p-4 rounded">container</div>
</div>

Edit in playground

Navigation bar with vertically centered items

<!-- Common pattern: vertically centered header -->
<header class="flex items-center justify-between bg-blue-600 text-white p-4 rounded-lg">
  <div class="flex items-center">
    <svg class="w-8 h-8 mr-3" viewBox="0 0 24 24" fill="none">
      <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="currentColor"/>
      <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
      <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
    </svg>
    <h1 class="text-xl font-bold">Company Name</h1>
  </div>
  
  <nav class="flex items-center space-x-4">
    <a href="#" class="hover:underline">Home</a>
    <a href="#" class="hover:underline">About</a>
    <a href="#" class="hover:underline">Contact</a>
    <button class="bg-white text-blue-600 px-4 py-2 rounded font-medium">Sign In</button>
  </nav>
</header>

Edit in playground

Card with content vertically centered using items-center

<!-- Card with vertical alignment -->
<div class="flex items-center bg-white p-4 rounded-lg shadow-md">
  <div class="flex-shrink-0 h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center">
    <svg class="h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
    </svg>
  </div>
  <div class="ml-4">
    <h3 class="text-lg font-medium">John Doe</h3>
    <p class="text-gray-600">Software Engineer</p>
  </div>
  <div class="ml-auto flex items-center gap-2">
    <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded">Message</button>
    <button class="bg-gray-100 text-gray-600 px-3 py-1 rounded">Profile</button>
  </div>
</div>

Edit in playground

Live Preview

Try the Align Items utility with different values

Open Interactive Playground

Variants

start: items aligned to start of cross axis; end: items aligned to end of cross axis; center: items centered on cross axis; baseline: items aligned by their text baselines; stretch: items stretched to fill the container along the cross axis (default)

startendcenterbaselinestretch