Why flex align-items: center hides all my dd items?

HTML-CSS
1

Here is my pen:

What i want to achieve: center everything
I can do this by

  • using margin: auto; which works nicely, (now it’s commented)
  • using column flexbox with align-items: center; (see .flex-center css).

The problem is that using align-items makes part of my html disappear (all dt tags), plus it also doesn’t do the centering.

Can someone please explain to me what is happening? (try to comment align-items for a start)

2

Hello! Use this:

#main{
display:block;
}

This way part of your html wouldn’t disappear! :wink:

3

Hello.

It is true that display: block in #main fixes the “hiding part”, since it overrides the flex from the class. But it still does’t center everything.

Also: i still don’t understand why flexbox doesn’t work?
Shouldn’t

.flex-center{
  display: flex;
  flex-direction: column;  
  align-items: center;    
}

be used for making stuff centered on vertical?

4

I think you do should use

.flex-center{
align-content: center;
}
5

BTW, why not use margin: 0 auto?

6

Flexbox’s align items centers items on the cross axis. That is, it centers top of page to the bottom.

Take a look at this guide. It should help you get what you need https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you’re still stuck, head back here and we’ll see what we can do.

7

I used align-items as per the tutorial:

just add

    flex-direction: column;
    align-items: center

to #box-container to see exactly what i want to have in my site.

I know that margin auto does the trick, i noted that in my first post. but i also expected flexbox to work: This is my actual issue: why doesn’t it want to work? :frowning:

8

Yes, exactly!
So that’s why i am thinking that for direction=column, the cross axis is a vertical line. and since i want to center everything along that vertical line align items=center would do the trick.

Am i missing something?

9

Hi, why did you give your #main a width:50% ?

10

Well, it should have been 90% if everything worked properly. But right now, in testing, i just left it @ 50% so that i can see properly how/if centering works.

Basically i thought that width 90% would give me a nice whitespace around the text, which is not too small, not too large

11

Yes. You are correct that the direction changes when you use flex-direction: column. So that means the height and width references are also changed, no? Let’s find out. Open up devtools, if you’re using chrome

  • right click → inspect
  • click arrow icon on top left of the panel

Then you can hover over elements on the page. Check the margins and padding. If you click on an element while this is activated, it will select the dom node in the panel.

From there, you can inspect it’s css and markup.

If I didn’t make it clear, let me know.

12

i have no idea. let me chew on that for a little while! :blush:

13

Check devtools. It will really help you answer this once you see the padding and margins drawn on the screen.

14

Thanks a lot for the idea with height and for chrome devtools.

Unfortunately i don’t exactly know how to use those, and they just made me even dizzier. I will have to learn to use them.

However, right now i just removed the height and width properties from #main and it seems that everything looks good enough.

I still have to understand what you mean swapping height <=> width, but that remains for another day.

Thank you all again for helping me with this challenge!

15

You set the width to 50%, so I assumed you wanted the center top to bottom. But the width does not rotate. In other words, width still goes left ↔ right.

Since you had the width set to 50% and no margin or padding to the left, it centered the container within the left half of the viewport.

If you want the items to center left <->, then you need width: 100%. This is why it worked when you commented it out, because 100% is the default.

This is completely understandable. As long as you’re aware it’s there, you can take your time with. It will prove invaluable for troubleshooting, so I highly recommend getting familiar with it.

For instance, here’s how I knew the width did not rotate. I just learned I could make gifs on my mac :nerd_face:

If you right click and open the image in a new tab, you can zoom in better

2018-06-07%2017_17_25
2018-06-07%2017_17_25958×471 1.42 MB

16

Holy S**t: that gif explained it so good! For this particular case: 1 image really is more than one thousand words.

Thank you again :).

1 Like