Flexbox not aligning items/ content to center of container

HTML-CSS
1

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?

3

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/

4

I tried that and its still not working.

 display: flex;
 align-content: center;
5

Not sure what you’re trying to do… do you mean center it like this - see image

center
center762×233 14.9 KB

If this is what you meant, i used “justify-content: center” - see image.
center2

You can also check and visit this site - https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

1 Like
6

I mean center it vertically. It does work to center it horizontally, but no matter what i do i cannot center it vertically.

7

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
8

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

cent1
cent1702×425 26.6 KB

Here is the result - see image
cent2

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

1 Like