Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although aligning text with CSS gives you more choices than HTML, it is still a fairly basic procedure. To align text, you'd use the text-align property and have the option of choosing left, center, right, or justified as your value. Alignment is inherited, so if you align the parent element, all elements inside of it should have the same alignment. If you don't specify a text-align property, most user agents use left-align as the default, so not specifying it is often the same as choosing left-align.
We'll also take a moment to explore vertical alignment. Although vertically aligning text is somewhat best handled using padding or line height, there is a vertical-align property that does more to confuse people than anything else. So as we align our text, we'll also explore that property, hopefully, to clarify what that value can do for you. So here we have our frequently asked question file, faq.htm, and that is opened from the 07_08/resources folder. The first thing what we're going to do is we're going to add a little bit of alignment to our sidebars.
Now currently, our Day Spa Package and the price, 2 Day Salton Sea and the price, Big Sur retreat and the prize are all left-aligned. We want those right-align so that they're lining up with the name of the tour. Now we notice that those are all paragraphs. They're all in the div tag with an ID of specials. So we're going to use to out advantage in targeting this. Now just to prepare this a little bit, I'm going to over to my Files panel, double-click the tab. That's going to collapse it. It's going to give us a little bit more space over here so that as we're targeting those Rules, we can see them and modify them a little bit easier.
So I'm going to go right over to my Day Spy Package. I'm going to click in there and hold my Option+Command on the Mac, Alt key on the PC, click that. I'm going to target that very bottom Rule, #sidebar #specials.p. I'm going to click on that. That's going to jump me down in my CSS Styles to that Rule. So it's an easy way of finding that. I can see the existing Properties. Now we're just going to add some properties here and modify the existing Rules. So instead of double-clicking to open up the CSS dialog box, we'll just make a very quick little edit right here.
So I'm going to Add a Property. I'm going to add the text-align property. That is the property that we use when we're setting text alignment. Now if you hit Tab, it'll move you over. You can type in the value if you want, but you get a nice little pulldown menu here and take a look at our values here: We have left, right, center, justify and inherit. Now the only one that might be a little confusing to you there is probably inherit. What you're doing there is you basically saying, "Hey, go up to your parent "element, whatever that may be, whether it's a div tag or the body tag or "whatever, find out what its text alignment is and go ahead and inherit that.
Now text alignment does inherit, so typically you don't have to specifically tell it that. Now for what we're doing here, we want to choose right-align. So when we click back into our Design view, we can see that we get our nice right-alignment for all of our paragraphs. So that worked out perfectly. All right. Well, what about these headings? They look okay left-aligned, but I'd kind of like to see what they look like center-aligned. So I'm going to do the same thing here. I'm going to use my Code Navigator. So that's Alt+Click or Option+Command+ Click. Go find the last rule here, callOut h1, that's the one we're targeting. And then right over here in our CSS Styles, highlight that. Go right down here in our Properties.
I'm going to add the text-align and hit Tab, and then choose center from that. Now when we click back in Design view, we see all of our headings in our sidebar there, are centered. It doesn't look that bad. I think we'll keep it. Now one last thing here, until we get to vertical alignment, are these answers. They have a ragged left edge, which isn't too bad, but I'm kind of wondering what they would look like justified. So again, I'm going to use my Code Navigator to target the mainContent mainArticle dl.faq dd rile, select that.
Then I'm going to go ahead and add the text-align property to that just like we have been doing. But this time, the text-align property that we want to add is justify. So we want to do text-align justify. This time when I click back in Design view, we could see that all of our frequently asked question answers are justified alignment. That looks pretty cool. So we're going to leave it like that. All right! Now let's talk about vertical alignment for a moment. I'm going to do a Save All. I'm going to scroll down. One of my questions is Can I use your backpack? Notice the answer is No, bring your own.
We will provide all the H2O you can drink. Well, in this case, I would like the 2 to be subscript rather than being aligned with the rest of it, just like the formula H2O. Now we do have a subscript and a superscript tag. That's sup and sub. The problem with that is we can't really control how far down or how far up the characters go. It's totally up to the user agent. So lot of people would rather use a property known as vertical-align. So as we write a custom class selector for this, we're going to take a look at the vertical-align property and talk about some of its limitations.
So highlight the letter 2, and with that highlighted, come down to your Properties Inspector. Make sure you're on the CSS tab. Make sure your Targeted Rule is a New CSS Rule. Click Edit Rule to create a brand-new class based on what you have selected. So here my Selector Type needs to be Class. We're just going to go ahead and call this .subscript. There we go. I'm going to click OK. In our CSS Rule Definition dialog box, you'll find the Text-align properties in the Block category.
So here's all the text- aligns that we've been doing: left, right, center and justify. We're wanting to take a look at the Vertical-align. Now when you grab that pulldown menu, it looks like, man, you've got just a tremendous amount of options here: Align to the baseline, subscript, superscript, top, text-top, middle, bottom, text-bottom. That's a lot of choices. Well, in reality, this property is designed more for table cells than anything else. So text-top, top, middle, bottom, those are applying to table cells. So if you ever apply that to a line of text inside of a div tag and you're like "Why isn't it centered within the div tag vertically." That's why.
That's not the best way to do that. However, notice that we do have a sub, and we do have a super. Well, let's do the sub, and see what it does for us. So I'm going to choose sub. I'm going to click Apply. Let's see if we can see any changes here, and let's hit OK. Now we've got a span that says subscript. Well, no change there. But if I turn Live View on and render that using the WebKit rendering engine, you can see that the 2 is positioned down below the line. Cool. That's a little far, don't you think? So that sub value didn't really allow me to control up adding numeric value.
It just went ahead and subscripted it down. Maybe that's not what I was looking for. So I'm going to go back to my CSS Styles panel. I'll just find my subscript selector, which is right there. Now, it's wherever you last were selected in your CSS Styles panel. Remember, you can always find that by clicking on your Code Navigator and finding it that way. So you may need to select that, bring up the Code Navigator and find it, but you should be able to find it right over here in your CSS Styles panel. Again, I'm going to double- click that, go to my Block category. Now, instead of Vertical-align saying sub, I'm going to take that to -.2em.
So you can actually use any explicit value you want. Positive values will move you above the baseline. Negative values are going to move you below the baseline. So now when I click OK, I get this little warning about how, hey that's not valid, but it really is. It just wasn't valid for older versions of CSS, the CSS 1 specification. So if I do a Save All, and make sure Live View is still turned on, you can see that's a little bit more manageable. It's not shoving it all the way down to where it looks like it's on a separate line. You can play around with that value and get that exactly where that you want.
Now aligning text is fairly easy, but remember to account for inheritance when aligning text. It can lead to more efficient style application. If you tell a parent tag to left-align, there is no reason to tell anything inside of it to left-align as well. Keep in mind, also, that the Vertical-align property only applies to inline elements. So in this case, that one letter, or a span tag, or something of that nature is not going to apply to a Block level element. To vertically align Block level elements, you'll have to use margins, padding, line-height, or a combination of those techniques.
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.
Your file was successfully uploaded.