This example demonstrates the importance of
items-center
when navigation items have different natural heights.
items-center
When navigation items have different heights (e.g., due to icons, multi-line text, or different padding) and
items-center
is missing, they will align to the baseline (or stretch, depending on other flex properties), leading to a jagged appearance.
Notice how the "Taller Item" and "Shorter Item" are not vertically aligned with "Home" and "About".
items-center
Adding
items-center
to the flex container (the
ul
element) vertically aligns all items to the center, resolving the jagged look.
Now, all items are neatly aligned to the vertical center of the navigation bar.