Tailwind-CSS-flex-items-center-vertical-alignment-issue-pfeny Tailwind Templates

Tailwind Css Flex Items Center Vertical Alignment Issue Pfeny

Tailwind CSS flex items-center not working as expected for vertical alignment

Tailwind CSS flex items-center vertical alignment issue

This repository demonstrates a bug where the items-center class in Tailwind CSS doesn't correctly center items vertically within a flex container. The expected behavior is that items-center should vertically align items to the center, but in this case, it only works for horizontal alignment.

Bug Description

A simple flex container with items-center and justify-between is used to align two divs. While the justify-between works as expected, items-center fails to center the items vertically.

Solution

The solution involves adding the h-full class to the child divs, ensuring they occupy the full height of their parent. This allows items-center to work correctly for vertical alignment.

Top categories

Loading Svelte Themes