Align

Quick reference

• 00:05 Okay, in this video, I wanna talk about aligning things.
• 00:07 We've touched on this a little bit already.
• 00:09 In fact, if we come back here, well,
• 00:11 first off, I've just put our basic image into our index page.
• 00:15 Okay, if we go back here to our h1 tag, we've already seen text-align center.
• 00:22 So if we save this and hit reload, boom that pops over center.
• 00:26 But how else can we center things and how else can we align other things?
• 00:29 That's we're gonna talk about in this video.
• 00:30 So when I come back here, get rid of that.
• 00:33 So I'm going to come down here and let's play with our image.
• 00:36 So let's create an image.
• 00:37 And one way to center images is to give this a display of block.
• 00:44 D-I-S-P-L-A-Y of block.
• 00:48 And then a margin of auto.
• 00:51 And we haven't talked about auto.
• 00:52 We talked about margin already but we haven't talked about auto.
• 00:55 If we save this, come up here, and hit reload, this moves this over.
• 00:59 So why did this happen?
• 01:01 Well, if we remember back when we talked about display.
• 01:04 When we talked about block versus inline things, block takes up the entire space.
• 01:09 The entire span all the way across.
• 01:12 So Images are usually inline elements but
• 01:15 we've changed it to block, with our display block.
• 01:18 And so it's taking up this entire space here.
• 01:21 And then, when we give it a margin of auto that centers it within this whole space.
• 01:26 So that's sort of a handy trick in order to center things, especially images.
• 01:30 But with CSS, there's a lot of different ways to center things.
• 01:34 And in fact, there's a lot sort of hacky ways.
• 01:36 You can do this in a lot of different ways and some people use different methods,
• 01:39 different hacks for different purposes.
• 01:41 And you'll get a feel when you should do different things.
• 01:44 So, that's one way to do it.
• 01:45 Another way to align things, we've talked about this a little bit already.
• 01:49 I'm going to go ahead and delete that.
• 01:51 You can use a position.
• 01:52 We've talked about position earlier.
• 01:54 So we go position, absolute and then we can tell it exactly where to go.
• 02:01 So if we give it a right of zero pixels and save this.
• 02:04 What this will do is it will push this all the way over to the right.
• 02:07 And it's real It's zero pixels away from this right border.
• 02:10 So we can position this any way we want.
• 02:12 If we give this a ten, save it, come back here.
• 02:16 Reload bops it over ten.
• 02:18 We give it 100.
• 02:19 Obviously, it's gonna bop it over 100.
• 02:21 So you can position things like that.
• 02:23 We can also go down if we want.
• 02:25 So we give this a top of say 300 pixels.
• 02:32 Let's get some space there.
• 02:33 Now, what that'll do is, it'll push the image 300 pixels down from the top.
• 02:38 Boom, bops it down.
• 02:39 So, that's another way to sort of position things in a very hard coded way.
• 02:43 If you know exactly where you want to put a thing relevant to another thing,
• 02:46 you can use the absolute.
• 02:47 Let's go ahead and delete that.
• 02:49 Another way to send our things in a sort of a hacky kind of way
• 02:52 is to use the line height property, and set it equal to the height of the thing.
• 02:56 So let's create a box really quickly and
• 03:01 let's give this thing a height of 300 pixels, and let's give it a border just so
• 03:07 we can see it of, I don't know, 2 pixels, call it solid and red.
• 03:14 Save this.
• 03:15 Come back to our index and let's get rid of this image and just give this a div
• 03:19 with the class equal to box and this is some text.
• 03:27 Dot dot dot.
• 03:28 Save this and let's just take a look at this real quick.
• 03:31 So we have this big huge thing and it's what did we say?
• 03:34 300 pixels.
• 03:35 So, how could we center this text in the box?
• 03:38 Well, like I said, this is sort of a hacky way.
• 03:39 You can give it a line height and set it equal to whatever you set the height to.
• 03:44 So that's 300 pixels.
• 03:46 If we save this, come back in here,
• 03:48 reload, boom it goes right down to the middle.
• 03:51 And then we could also give it a text dash align of center,
• 03:57 save that and boom it pops over to the directly center.
• 04:00 So that sort of a way to do things that's what I would label kind of a hack, and
• 04:05 like I said there are a lot of this hacks, there is a lot of ways to center things.
• 04:08 In fact, going to any sort of CSS forum where people talk about CSS and people
• 04:13 argue this thing over and over which what's the best way to center things?
• 04:17 What's the best way to align things?
• 04:19 And it really is gonna depend on exactly what you're doing and
• 04:22 what you're trying to achieve.
• 04:23 And it'll also depend on some of the other elements that you're using.
• 04:26 So as you get more and more experienced with CSS,
• 04:29 you'll come up with the best way to align things by trial and error.
• 04:33 That's align and that's all for this video.

Lesson notes are only available for subscribers.