Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Unlike horizontally aligning text, there is no vertical text align property. Now, there is the property vertical align, and because a lot of people aren't really sure exactly how it works, it's either usually misused or ignored entirely. It can in fact be used to help vertically align text. It just has to be used correctly. The vertical align property is designed to apply to inline elements or table cells. When used with inline elements, you can use keywords such as top, middle, and baseline, and you can also use computed length values and percentages.
If you use it with table cells, you are limited to just those keywords. Another way to vertically align text is a method that we have already discussed, using line height. For single line text, line height centers the text inside the given value. If the line height equals the height of the container, your text will automatically be centered inside of it. This is a great way of centering vertical menu bars. In this exercise, we'll explore using both techniques to vertically align our text. So we are in the 05_08 file, and one of the first things I'm going to do is try to center my header text vertically within the header elements.
So I'm going to go to my CSS Styles panel, and I'm going to click #header. Now, I notice that #header has a height of 5ems. Now, if I want to let my line height drive that, I need to remove this property. So I'm going to choose the height property, and then click the Trash Can to get rid of it. Of course the header now collapses into the h1 tag. So let's reset that height using line height. So grabbing the #header h1, I'm going to add a property, and I'm going to add line-height, and I'm going to set that to 5ems.
Now, when I do that, it recessed the height of the header to 5ems. Now the text is vertically centered within the element. That's a really cool way of not only setting the height of something, but centering the text inside of it. Now, if our header were multiple lines, this wouldn't work quite as well for a single line header or element that works perfectly. Now, I'm going to do the same thing with our footer. If I scroll down, I can see that my paragraph footer is more or less centered vertically in that. I just need to make that a little bit taller. So I'm going to go down and find #footer p, and I'm going to add the line-height property to that and this time, we are going to go ahead and give this a line-height of 3ems.
So now again, it's vertically centered within that and a good bit taller. We are going to go do a Save All and preview that in our browser. The nice thing is by using ems for height here, we are making it relative to the size of the text itself. That way even though it's vertically centered in that, it's always going to relate to the height of the element. Now, if I scroll up just a little bit more, I can see that I have a headline that says Please Center the 2nd Heading. I would really like to use an ordinal for the nd rather than just the nd that I have here.
Now, there are some structural XHTML tags that I want to talk about here. You have the SUP or superscript tag and the SUB, which is the subscript tag. Those will move your text up or down on the baseline, based on a super or subscript text. Now, structurally, if you want to use those, those are great, but in terms of just rendering in the browser itself, you are not in control of how far up it's going or how far down it's going or how the text is resized. A lot of times you are not going to be happy with the visual results.
So if you would rather control that manually, you can write a class selector to change that or you can zero out what's happening with the superscript or subscript tags and add your own measurements. We are going to go the route of using a class selector. I am going to create a new CSS rule. This is going to be a class, so make sure you choose that from this menu, and I'm going to type in .ordinal. So remember that period precedes every single class selector, so a .ordinal. I'm going to define that in main.css and click OK. Now, there's a couple of things we want to do here.
For font-size, I'm going to type in 60%. So that's going to be 60% of whatever the parent element is. In this case that will be whatever heading or whatever paragraph that's inside of. The next thing I want to choose is Letter-spacing. So I'm going to go to my Block category, and for Letter-spacing, I'm going to tighten this up a little bit, I'm going to do -0.05em. So that's just going to pull those letters together a little bit tighter. Just underneath that is the vertical- align property that we are going to be using.
Now, again, I have these keywords, baseline, sub, super, top, text-top, and you could those, but again, you are relying on the browser's default settings for those. So I want to take a little bit more active control over that and I'm going to type in 50%, so that's going to shift it up the baseline by 50% of its value. So we are going to go ahead and click OK, and now we need to apply it. So I have got the nd in 2nd highlighted, and using the HTML part of the Properties Inspector, I'm going to grab the Class pull-down menu, and choose ordinal.
When I do that, it looks like it didn't work, but that's just because the Dreamweaver rendering environment isn't always 100% accurate. So I'm going to do a Save All, and preview that in my browser. Indeed, now I can see that I have a nice placement of the ordinal using that vertical-align property. While these techniques help us when vertically aligning our text, they won't work in all instances. For example, vertical aligning block level elements is considerably trickier, and we are going to have to tackle that next.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.