align-content:center does not work!

Hi,why align-content :center; does not work in this css code? .parent{ background-color: gray; display:flex; flex-direction:row; width:1000px; justify-content: space-around; align-content:center; height: 800px; text-align: center;
}
No description
No description
No description
10 Replies
ChooKing
ChooKing2mo ago
The divs are aligned vertically in the center of their flex container. What you are observing is that the text is not centered in the child divs. The align-content does not apply to grandchildren.
vince
vince2mo ago
It should be align-items: center shouldn't it?
Abeer2003
Abeer20032mo ago
but when i add flex-wrap:wrap; it work Thanks
ChooKing
ChooKing2mo ago
When you use align-content, the children take the full height of the container. When you use wrap, they don't. The suggestion to use align-items also works for the same reason.
vince
vince2mo ago
Hmm but they did specify height on the children, so why wouldn't align-content work there too?
Abeer2003
Abeer20032mo ago
the children take the full height of the container if align-center:stretch;
ChooKing
ChooKing2mo ago
I didn't see the height. It's cut off in the screen shot except when enlarging. The problem is still the same unless you give exactly the right height.
vince
vince2mo ago
Yea I honestly have no idea how align-content works --- I always use align-items with flex haha Wdym by the last sentence if you don't mind?
ChooKing
ChooKing2mo ago
Text is not automatically centered vertically in a div. You can create the illusion with certain heights relative to font size. I recommend placing a visible border around the children. You should see that they center properly in the parent, but the text won't be centered in their own container.
clevermissfox
clevermissfox2mo ago
Align-content (in flex) only works when you have applied a flex-wrap of wrap