Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last video we talked about horizontal alignment of text and centering and right and left and that sort of think. You also vertically align text, although what's really more the case is that you can vertically align elements within text. As an example, let's take a look in our markup. Our h1 element, the about tea history has a B element inside of it which is used generally to change the color. The about tea is the B element and it sort of uses a stylistic hook, we're going to use it as a hook to look at vertical alignment.
So I'm going to go up here in our style sheet, I'm going to say h1 b, that's the boldface element that's inside h1 like the one that we're dealing with. So what we're going to say is vertical-align sub. This is sub as in subscript. So keep your eye in the about tea bit. Notice how it shifted down. That's subscripting. Effectively what a vertical line sub means is push this element down as though it was a subscript.
Doesn't say exactly how far that should be, doesn't say anything about changing the font size, you would think of a subscript as being a smaller font size, but that's not what vertical align sub means. It simply means change the vertical alignment of this element so that it's down a bit. There is, as you might expect a corresponding super for superscript, where the element is lifted up as a superscript would be the exact distance is not specified so different browsers might do is that it differently. There's no change of font size, it's simply lifted up into a superscript. Now, that's pretty simple. There are a variety of keywords like top and text top and text bottom these are not very often used and they are actually kind of difficult to explain. So really, I think once you sort of know the basics of vertical alignment doing more research on those always works.
Well there's also the ability of vertically aligning things using length measures like pixels or ems and in this case, vertical align 1em will mean take that b and move it up, the distance equivalent to the value of the font size for this element. So, there it is, it's pushed up what you might think of as a full line, but notice how the white area there, which is the background of the h1, notice how it got taller. The b element inside of the overall text of the h1 is changing actually the height of the line of text that is inside this h1, about tea history. That's all part of a single line of text. That line of text is getting taller, as we're changing vertical alignment to push the element up or down or whatever. So that actually illustrates how vertical alignment can affect the line height without you ever saying anything about the line height.
Even if we were to say line height 1em, the line box would get somewhat pushed apart or at least it could, so that's something to watch out for and there's a vertical- align baseline, which is the default. That means line up the baseline of this text with sort of the overall baseline of the line of text. You can have negative vertical alignments, should you so choose. This pushes the b element down. So that's a vertical alignment in a nut shell. It's actually not very common to use vertical alignment, but there are cases when you want to, for example with a superscript you might want to exactly control how much that goes up rather than saying vertical- align super which is effectively the default for superscript elements.
You might say vertical-align 0,5em so that will push it up half a line effectively. And then font size, you might want to exactly set what the font size should be. There's a faux superscript not that I know why you would ever superscript the words about tea colon, but in case you ever need it to, there's how you could do it, just is saying vertical-align 0,5em, font-size 0,7em and we'll see that effect. So that's vertical alignment for you.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66398 Viewers
61 Video lessons · 96852 Viewers
56 Video lessons · 110545 Viewers
82 Video lessons · 105175 Viewers
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.