In this lesson we're going to vertically center the text in our footer. You need the files quote_vcenter.html and quote_vcenter.css from the Exercise folder. You'll also need the files quote_ vcenter2.html and quote_vcenter2.css from the Exercise folder, because I'm going to show you two ways to vertically center your text. We'll start with the first one, quote_vcenter.html. Open up the file in your browser to see what we're working with.
If you scroll to the bottom, you'll see we have a single line of text in the footer and it's currently sort of tight to the dotted line. It's not bad, but we're going to vertically center it in the space. The first method of vertically centering text works great for a single line of text like the one we have here. We're simply going to make the line height for the text equal to the height of the div. This works because line height adds equal amounts of space above and below a line of text. Let's do it.
In your CSS scroll down until you find the div ID for the footer container. You can see the height of the container is 42 pixels. Scroll down further and you'll see I have a class for the text that's in the footer. It's called .footer and we are going to add line-height of 42 pixels. So our line height is now equal to the height of the div. I'll save that and review it in the browser and hit Refresh, and excellent, it is now centered.
Although honestly visually it looks a little bit low to me. This is not surprising. There is a lot of lowercase letters here and there is that sort of bit of extra space above what we call the mean line. That little bit of extra space that's not being taken out by the lowercase letters. So to visually center it, we're actually go to mathematically make it so it's not quite centered. Let's go back into our CSS and instead of using a line-height of 42, let's just use a line- height of 41. That'll take away a little bit of our space. We'll go back into our browser and refresh.
It moves that line of type up just a little bit and now it actually looks centered even though mathematically it's not. Again this is a great way to center a single line of text in a div when the div has a static height and you know what that height is. But this method wouldn't work if you have more than one line of text. Giving the text a large line height would just give it a lot of space between the lines of text. It just wouldn't work. So what do you do if you have more than one line of text? Well, there are multiple approaches and I'm going to show you one. Let's view what we're looking at here.
I am now looking at the quote_ vcenter2.html in the browser. When I scroll down you can see we have two lines of text. They are really tight inside the div. That's because our div has that set-height of 42 pixels. The method I'm going to show you is the one I like best when working with larger amounts of text. It lets the div respond to the text rather than forcing the text into a set div height. Let's take a look at our CSS. We'll need the CSS for the vcenter2. We're going to scroll down. You can see that currently our footer_container is 42 pixels. We're going to change that so it has an auto-height and now the div will respond to the text inside of it.
If we go back down to our footer, in order to center the text we're just going to add space above and below the text. So let's put in a padding-top of 14 pixels and a padding-bottom of 14 pixels, and this will at least mathematically center our text. Let's take a look at it in our browser. Refresh, scroll down a bit.
Now I expected this to visually vertically center the text, but it didn't, so there is something going on in that CSS we need to take a look at. Let's go back in there. Footer is a class and this class is applied to our p elements, so let's go into our p element and take a look at what we're working with here, and we can see there is a margin-bottom on our P element and that's showing up in our footer text, because the footer class is inheriting that bottom margin. So what we're going to do is get rid of that margin-bottom. We're going to zero it out, 0 pixels. You don't need the pixels, but it's a habit of mine. I'm going to save that and go back into the browser.
Now we can see that it is centered in the space, and I think it still looks a little bit too low, because again there is a difference between mathematically-centered and visually-centered. So I am going to take this back into the CSS one last time and we're going to change that padding-top to a 13, just slightly bump it up a little bit. I'll refresh, and there we go. I think it looks visually centered now. It looks really good actually.
Get unlimited access to all courses for just $25/month.Become a member