This example illustrates the importance of `items-center` when navigation items have different natural heights.
Notice how the items are not vertically aligned. The item with the icon and larger text pushes the baseline, making the nav look jagged.
Classes used:
flex space-x-4
(no
items-center
)
By adding `items-center`, all navigation items are now perfectly aligned vertically, regardless of their individual heights.
Classes used:
flex space-x-4 items-center
The "Gotcha" is that if navigation items have different natural heights (due to icons, different font sizes, multi-line text, or varying padding), failing to use
items-center
(or another alignment utility like
items-start
or
items-end
) will result in a misaligned, unprofessional-looking navigation bar.
items-center
is typically the desired behavior for vertical centering in a horizontal navbar.