F flexr.dev

Layout Recipe

Vertically Center Anything with Tailwind items-center

The old 'vertical-align' property never worked the way anyone expected. In flexbox, vertical centering inside a row is one utility: 'items-center' on the parent aligns every child to the vertical middle of the tallest item. This is the fix for icons that sit too high next to text, badges that hug the top of a list row, and avatars that refuse to line up with usernames. Children keep their natural left-packed order because 'justify-start' stays untouched.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Current Layout:

items-center is flexbox's vertical-align

The old CSS vertical-align property only ever worked on inline and table-cell elements, which is why it so rarely did what you wanted. In a flex row the answer is one utility on the parent: items-center aligns every child to the vertical middle of the tallest one.

Tailwind 
<div class="flex items-center gap-2">
  <svg class="h-5 w-5">...</svg>
  <span>Label sits centered next to the icon</span>
</div>
Vanilla CSS 
.row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

The everyday fixes it solves

items-center is the cure for icons that float above their text, badges that hug the top of a list row, and avatars that will not line up with a username. Because it only touches the cross axis, the row keeps its natural left-to-right order — justify-start stays untouched.

Centering a row vs centering a whole container

There is a difference between vertically centering items within a row and centering a block inside a tall container. For a single icon-and-text line, items-center alone is enough — the row is only as tall as its content. To center a card inside a full-height section you also need a parent height (see centering a div). Same utility, different amount of vertical space.

Common mistakes

Still reaching for vertical-align. It does not affect flex children; use items-center.

Setting self-center on every child. One items-center on the parent is simpler than repeating self-center.

Expecting it to add height. items-center aligns within the existing row height; it does not create vertical space.

Frequently asked questions

How do I vertically center items in a row in Tailwind?
Add items-center to the flex row; every child aligns to the vertical middle of the tallest item.
What is the Tailwind equivalent of vertical-align?
For flex layouts it is items-center on the parent, or self-center on a single child. The vertical-align property itself only affects inline and table-cell content.
Why is my icon higher than the text next to it?
The flex row is missing items-center, so children align to the top. Adding items-center lines the icon up with the text's middle.

Popular Layout Guides