All language subtitles for 049 The Dark Art of Centering Elements with CSS.en_US

Now let's take a look back at what we've got on our web site and see how we can use some of the knowledge

that we learnt about positioning in order to make this web site look the way that we want it to.

Now the first thing that we want to achieve is we want to center all of these elements, the image, the

mountain image, as well as the text here in the h1, and also the subtitle.

So the easiest way of centering elements is by tapping into a property called text align and that property

has to be set inside the parent container,

so in this case either in the top container or inside the body.

So I'm just going to go ahead and center everything on screen by tapping into the body selector and

saying text-align center.

If we hit save and we head back and we hit refresh then you'll notice that all of our images, our h1

and our paragraph is now centered.

Now this works as long as we've got an inline block element such as our images or if we've got these

full width block elements like our h1 and our p tag, which are going from left edge to the right edge.

Now if I go into my code and I change the h1 to change its width to say only, I don't know, let's

say 10 percent,

then you'll notice that it's no longer being center aligned despite the fact that it's still inside

the body which is asking for text align to be center.

So what do we do in this case?

Well the other way of centering an element is by using the margin.

So there is a value called auto which when applied will center the element either vertically or horizontally.

So in this case if we're looking for horizontal centering then we can say that the margin top is 0,

the margin right is auto,

the margin at the bottom is also 0 and the margin on the left is again auto.

So I'm going to delete this margin top here and hit save.

And if I refresh you'll see that our element despite being only 10 percent of the width of the screen

is now centered in the middle of our web page.

And when you look at the box model you can see that the top and bottom margins were set to be 0 by us

and the left and the right are set automatically to whatever amount it needs to be in order to keep it

in the center.

So very often when you find yourself trying to center elements you'll probably end up using one of these

methods.

So just to recap, text-align center inside the container, or the parent element, will center everything

inside that doesn't have a width set.

Now if it is a block element and it has a width set, then you're going to have to center it using this

auto value in the margin.

So in this case we can also shorten this by saying that the top and bottom needs to be zero and the

left and right needs to be auto.

And that will not change this at all.

And this is just one of those circle shorthands that you will begin to learn.

And if you've forgotten how that worked or if you're interested in learning more then you can always

check out the CSS Docs on MDN for the margin, where they go through each of these, where if you only

have a single value of the margin then that's all four sides,

if you have two then that's top and bottom and left and right,

if you have three then it's the top left and right and bottom, and if you have all four then that's just

all four sides in a clockwise direction.

So if you get confused or if you forgot how that works then have a look over there.

Now I'm actually going to undo and I'm going to revert back to margin-top being 0 and text-align

being centered and you'll see that this is what it will now look like.

Now the next problem we need to tackle is that these two images are acting as if they are inline blocks,

and the cloud, because it's in the flow of the HTML file, is affecting the layout of the mountain.

More specifically, I want this mountain to be right in the middle, and at the moment it’s being pushed to

the right by that cloud.

So in order to fix this we have to take this cloud out of the HTML flow, and once we've done that

then the mountain will go back to being centered.

So can you remember how we can take an element out of the HTML flow by changing one particular CSS

property? That is of course the position property that we're going to change.

And we're going to change it from its current value which is static to absolute and that is how we're

going to remove it from the HTML flow.

So inside our index.html I'm going to give a class to our bottom cloud and I'm going to call

it bottom-cloud.

And while I'm here I'm going to give a class to our top cloud and I'm going to hit save and I’m going to head back

over to all styles.css, and we're going to target that bottom-cloud, and I'm going to set

its position to absolute.

Now if I hit refresh you can see that that cloud has been taken out of the flow and it's kind of being

placed more or less randomly on the screen.

But more importantly our mountain is now bang in the middle of the file,

and this is exactly the layout that I want for it.

So the next part is a challenge and this is what you want to end up with if you manage to complete the

challenge successfully.

We've got our top cloud that's on the right and a little bit above the h1, and we've got our bottom

cloud that's on the left and just between the text and the mountain image, and they are both taken out

of the flow of the HTML document.

So pause the video and give that a go now. Now how did that go?

Firstly, our bottom cloud at the moment has an absolute position.

Now in order to position it relative to something, one of its parents has to have its position set as

relative.

And if we don't then it will be relative to the body.

So in our case I want us to be able to position our bottom cloud relative to this entire top container.

So I'm going to set the position of our top container to relative.

And I'm going to start off by giving our top container just a little bit of padding at the top so that

we can push down this cloud and all of these contents just down by a little bit so that it's not all

stuck at the top of the page. So to do that we can add a padding top of 100 pixels, and that just pushes

everything down a little bit, and then I'm going to add our top cloud as well.

And I'm also going to take it out of the flow by changing its position to absolute as well.

Now if we hit refresh you can see our two clouds are kind of just floating around without doing very much.

So now let's position them properly.

So relative to our top container here I want the top cloud to have a right margin of 300 pixels and

a top margin of 50 pixels.

And I want our bottom cloud to have a position left margin of 300 pixels and and a bottom margin of 300

pixels from the bottom of its parent which is of course the top container.

So it will be from this line.

And if we hit save and refresh then this is what we will end up with.

Now before we do any further positional tweaking we should really format the text because by changing

the font, the font size etc., we’re going to affect the positioning of our elements as well.

So in the next lesson we're going to look at how we can style our text using CSS.

So for all of that and more, I’ll see you on the next lesson.