Transcript from the "Centering the Moles" Lesson
[00:00:00]
>> Brian Holt: Now we're going to make it, so that these, the moles kind of sit a little bit better into the center of their holes. So we're gonna say in the whole container which if you remember, the whole was the initiative. The whole container was the outer div and you'll find with CSS.
[00:00:17]
This is often something that you need to do that you need to have like an outer and inner. Just to kinda get things to sit correctly and be able to do the styling correctly. There's nothing wrong with that. Feel free to always add container div just so you can get everything set the way that you want it to.
[00:00:31]
So I'm gonna say, I want a whole container to take 25% of the page and the reason being as I wanna have, right now I have six on one line of foreign and other line. I wanna have 442. So that's what this with 25% is gonna do. I'm gonna say display flex, justify content center and align items center to get the mole to sit in the middle of its hole container.
[00:01:02]
So now what we should do is when we refresh the page, it should be four of them online and they should be roughly centered on the page.
>> Brian Holt: So already this is looking better and better, right?
>> Brian Holt: Good so far?
>> Speaker 2: Where did you put the hole-container in your HTML?
[00:01:26]
>> Brian Holt: So here's the hole-container. Inside the hole-container is a hole.
>> Speaker 2: For every hole, okay.
>> Brian Holt: Yep.
>> Brian Holt: And inside of that is the image.
>> Speaker 2: Is it preferable to do that versus make like a row and use flex box for that? So like a row contains, the first two contain four holes and the last one contains two holes.
[00:01:56]
>> Brian Holt: That's totally up to you. That's an absolutely valid decision to make. And then if you didn't employ that strategy, you could have the two in the middle and you'd have more granular control over the organization of the holes. In this case, I'm just saying flex box to do whatever you want.
[00:02:15]
I don't really care.
>> Speaker 3: Started out in a single line, right, vertically, then you do something to tell it to go horizontal or that was part of the.
>> Brian Holt: Yeah, that was here. The background has display flex on it and flex wrap allowed it to go on to multiple lines here.
[00:02:40]
Because each one of this takes 25% of the line, because 25, 25, 25. And once it reach a 100%, then it wraps to the next line.
>> Speaker 3: So much easier than doing the rows like I was trying to thing to do, so yeah.
>> Brian Holt: Yeah, this is just a quick and easy way to do it for sure, okay?
[00:02:57]
So now I do wanna get these moles are still a little off-center, right? So I want them to sit a little bit more centered. So I'm just gonna say mole position relative. So relative position means like you're going to start here and then I want you to go in some direction, some amount.
[00:03:17]
So I'm gonna say, start where you are and then just move yourself right 30 pixels. So all of these are going to shift to the right, from the right, rather 30 pixels. So they're just going to go a little bit more and they're gonna hopefully look centered.
>> Brian Holt: And now they look more centered, right?
[00:03:40]
>> Brian Holt: So this looks a little bit better, right, cuz now their little paws look like they're like gripping outside the hole.
>> Brian Holt: I just have to say my favorite part of about this is the king moles have little rings on their claws. I just think that’s the best, personally.