Flexbox not aligning items/ content to center of container

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:

  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/

1 Like

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

1 Like

I tried changing the height for your .output item and margin: auto - see image.

Here is the result - see image

Hope this is what you’re looking for(trying to do)…

1 Like