Vertically centering text


show more Vertically centering text provides you with in-depth training on Web. Taught by Laura Franz as part of the Typography for Web Designers show less
please wait ...

Vertically centering text

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 ...

Vertically centering text
Video duration: 5m 18s 6h 25m Appropriate for all

Viewers:

Vertically centering text provides you with in-depth training on Web. Taught by Laura Franz as part of the Typography for Web Designers

Subject:
Web
Software:
TextWrangler
Author:
please wait ...