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;
}
}
10 Replies
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.
It should be
align-items: center shouldn't it?but when i add flex-wrap:wrap; it work
Thanks
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.
Hmm but they did specify height on the children, so why wouldn't align-content work there too?
the children take the full height of the container if align-center:stretch;
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.
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?
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.
Align-content (in flex) only works when you have applied a flex-wrap of wrap