My pen --> https://codepen.io/Mike-was-here123/pen/rQXpGd
If you go to CSS line 98 (HTML- 29 by Results) you can see I have .output_item with flexbox properties to align items to the vertical center of the div:
.output_item{
display: flex;
align-items: center;
}
Yet on the HTML, my items are not aligned vertically to the center (the paragraph elements are the children- bordered in red).
Why won’t it align to the center? How can I fix this?
Since you have oly one item in your flexbox I believe you should use align-content:center
here this might be helpful https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I tried that and its still not working.
display: flex;
align-content: center;
Not sure what you’re trying to do… do you mean center it like this - see image
If this is what you meant, i used “justify-content: center” - see image.
You can also check and visit this site - https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I mean center it vertically. It does work to center it horizontally, but no matter what i do i cannot center it vertically.
your p tags are styled to p { margin-top: 0; margin-bottom: 1rem; } (I think this is bootstrap)
try to overwrite it
p {
margin-top: auto;
margin-bottom: auto;
}
and put this one back
align-items: center;
It should work
