Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Aligning text

From: Dreamweaver CS5 Essential Training

Video: Aligning text

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.

Aligning text

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.

Show transcript

This video is part of

Image for Dreamweaver CS5 Essential Training
Dreamweaver CS5 Essential Training

135 video lessons · 89061 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 57s
    1. Welcome
      1m 8s
    2. Using the exercise files
      1m 49s
  2. 7m 50s
    1. What is Dreamweaver?
      3m 16s
    2. Learning web design
      2m 22s
    3. Current web standards
      2m 12s
  3. 43m 9s
    1. The Welcome screen
      4m 5s
    2. Windows and Mac interface differences
      2m 23s
    3. The Application toolbar
      4m 7s
    4. The Document toolbar
      4m 40s
    5. Arranging panels
      8m 19s
    6. Managing workspaces
      7m 32s
    7. The Properties Inspector
      5m 54s
    8. The Insert panel
      6m 9s
  4. 25m 45s
    1. Basic site structure
      3m 11s
    2. File naming conventions
      1m 49s
    3. Defining a new site
      4m 35s
    4. Managing sites
      4m 51s
    5. Managing files and folders
      6m 36s
    6. Working with browsers
      4m 43s
  5. 27m 21s
    1. Creating new documents
      5m 16s
    2. New document preferences
      3m 6s
    3. Setting accessibility preferences
      4m 56s
    4. Working with starter pages
      3m 46s
    5. Managing starter pages
      10m 17s
  6. 30m 2s
    1. Basic tag structure
      2m 15s
    2. Adding structure to text
      8m 20s
    3. Creating lists
      9m 59s
    4. Getting text into Dreamweaver
      5m 59s
    5. Importing Word documents
      3m 29s
  7. 1h 17m
    1. Understanding style sheets
      2m 16s
    2. The anatomy of a CSS rule
      1m 48s
    3. Setting CSS preferences
      6m 36s
    4. The CSS Styles panel
      10m 2s
    5. Controlling CSS through the Properties Inspector
      5m 14s
    6. Using the Code Navigator
      7m 21s
    7. Using CSS Enable
      6m 45s
    8. Understanding element selectors
      8m 11s
    9. Understanding class selectors
      8m 49s
    10. Understanding ID selectors
      5m 59s
    11. Understanding descendant selectors
      6m 51s
    12. Attaching external style sheets
      7m 44s
  8. 1h 47m
    1. Working with units of measurement
      7m 11s
    2. Declaring font families
      9m 39s
    3. Controlling font sizing
      9m 9s
    4. Controlling weight and style
      8m 0s
    5. Controlling line height
      8m 29s
    6. Controlling vertical spacing with margins
      12m 3s
    7. Controlling spacing with padding
      5m 39s
    8. Aligning text
      8m 26s
    9. Transforming text
      5m 36s
    10. Writing global styles
      15m 42s
    11. Writing targeted styles
      17m 37s
  9. 1h 32m
    1. Understanding image types
      5m 3s
    2. Managing assets in Dreamweaver
      12m 51s
    3. Setting image accessibility preferences
      4m 20s
    4. Setting external image editing preferences
      3m 52s
    5. Placing images on the page
      7m 37s
    6. Photoshop integration
      5m 54s
    7. Modifying Smart Objects
      5m 51s
    8. Alternate Photoshop workflows
      8m 8s
    9. Modifying image properties
      11m 14s
    10. Styling images with CSS
      7m 11s
    11. Using background graphics
      9m 3s
    12. Positioning background graphics
      11m 6s
  10. 55m 16s
    1. Link basics
      3m 37s
    2. Setting site linking preferences
      2m 14s
    3. Creating links in Dreamweaver
      11m 1s
    4. Absolute links
      5m 8s
    5. Using named anchors
      11m 19s
    6. Linking to named anchors in external files
      2m 44s
    7. Creating an email link
      5m 24s
    8. Creating CSS-based rollovers
      13m 49s
  11. 1h 34m
    1. CSS structuring basics
      2m 56s
    2. The Box Model
      13m 21s
    3. Understanding floats
      6m 53s
    4. Clearing and containing floats
      8m 56s
    5. Using relative positioning
      4m 8s
    6. Using absolute positioning
      7m 18s
    7. Creating structure with div tags
      12m 7s
    8. Styling basic structure
      10m 34s
    9. Creating a two-column layout
      10m 37s
    10. Using Live View and CSS Inspect
      7m 51s
    11. Using Browser Lab
      9m 39s
  12. 56m 22s
    1. Reviewing table structure
      7m 41s
    2. Importing tabular data
      5m 13s
    3. Creating accessible tables
      9m 56s
    4. Using thead and tbody tags
      4m 0s
    5. Basic table styling
      8m 45s
    6. Styling table headers
      7m 52s
    7. Styling column groups
      4m 22s
    8. Creating custom table borders
      5m 1s
    9. Styling table captions
      3m 32s
  13. 1h 43m
    1. How forms work
      3m 0s
    2. Reviewing form design
      3m 2s
    3. Creating accessible forms
      7m 33s
    4. Setting form properties
      4m 6s
    5. The fieldset and legend tags
      4m 32s
    6. Inserting text fields
      5m 58s
    7. Inserting list menu items
      5m 26s
    8. Inserting checkboxes
      7m 50s
    9. Inserting radio button groups
      6m 22s
    10. Inserting text areas
      4m 12s
    11. Inserting submit buttons
      3m 37s
    12. Basic form styling
      12m 0s
    13. Form element styling
      8m 52s
    14. Styling form layout
      11m 49s
    15. Adding form interactivity
      2m 47s
    16. Using Spry validation widgets
      12m 49s
  14. 1h 23m
    1. Planning for templates
      10m 51s
    2. Creating a new template
      10m 37s
    3. Using editable attributes
      13m 43s
    4. Creating optional regions
      6m 23s
    5. Creating new pages from a template
      9m 17s
    6. Applying templates to existing pages
      6m 9s
    7. Working with nested templates
      7m 56s
    8. Working with repeating regions
      12m 58s
    9. Modifying templates
      5m 41s
  15. 40m 14s
    1. Behaviors overview
      3m 47s
    2. Hiding and showing elements
      9m 18s
    3. Spry overview
      4m 4s
    4. Using Spry widgets
      11m 36s
    5. Adding Spry effects
      3m 6s
    6. Using the Widget Browser
      8m 23s
  16. 28m 18s
    1. Inserting Flash files
      5m 4s
    2. Setting properties for Flash
      6m 27s
    3. Dreamweaver and Flash integration
      6m 6s
    4. Encoding Flash video
      6m 10s
    5. Adding Flash video
      4m 31s
  17. 45m 28s
    1. Running site-wide reports
      6m 33s
    2. Checking for broken links
      5m 41s
    3. Checking for browser compatibility
      8m 3s
    4. Adding remote servers
      8m 0s
    5. Uploading files
      7m 20s
    6. Managing remote sites
      9m 51s
  18. 34s
    1. Goodbye
      34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.