- [Chris] Hi, this is Chris Converse, and in this episode,
we'll take a look at vertically centering text
within a parent element.
While there are a few ways you can do this,
either using margin and padding or flex display properties,
one of the most efficient ways is to use
the table display properties in CSS,
allowing us take advantage of a table cell
without the rigid and extraneous HTML of an actual table.
So if you'd like to follow along with me,
download the exercise files, and let's begin by opening
index.html in a text editor.
Now once you have the HTML file open,
you'll see up in the heading area here
we have a link to style.css,
which we'll open in a few minutes.
And inside the body area we have a main article element,
and in here we have an aside.
Now it's the aside element here where I want to
center vertically these two paragraph elements.
Now to take a look at the layout so far,
you can take index.html and open this up in a browser.
And then once in the browser,
you'll see the aside element here.
We can see Visit Beautiful Amsterdam,
the two paragraph elements that are showing here,
and I've gone ahead and put in a background image.
So now, in order to center these,
and to make use of the table display properties,
we do need to have one additional HTML element in place.
So inside of the aside in the HTML,
let's come in here an put both of these paragraph elements
inside of a div tag.
Let's come here and add a less than sign,
and add a div tag before the first paragraph element.
Next I'll indent these,
and then after the paragraph elements,
let's end the div tag.
And so now with our HTML modified, let's save the HTML,
let's go back to the exercise files,
let's find style.css and let's open this in our text editor.
Once inside, let's scroll down,
and the first thing I'd like to do is finish
styling the text inside of the aside.
So down here I have a rule that's targeting the paragraph
inside of the aside.
So I'll come in here and copy that.
Let's add a few lines, let's paste that on the next line,
before the media query,
and let's change the p to p:last-of-type.
So now I'm going to target the last paragraph element
inside of the aside,
and let's come in here and change a few properties.
First let's come in here and change font size.
We're going to set the font size to 2.3 ems.
Next line, we're going to set the letter spacing,
we're going to set this to 14 pixels.
And then finally, we're going to set the margin
to negative six pixels on the top,
so it'll be a little bit closer to the
paragraph element before it,
then a space, then zero for the right,
zero for the bottom and zero for the left.
With these in place I'll hit Save.
Reload in the browser.
And now we can see those new type properties taking effect.
So now let's go back to the CSS,
and what we're going to do is we're going to
come into the aside element here,
and we need to set a display type on here.
So after the font family, let's hit a return,
let's set the display type to a table.
So display: table;
so now the browser's going to treat that aside
as if it were an HTML table.
Let's scroll down.
After the aside, let's hit a return.
Now let's target the div element that's inside of the aside.
So we'll type aside space div,
another space, put in our brackets,
and then here we're going to set a display property
to table-cell then a semi-colon.
And now that this has table cell display properties,
we can now use CSS properties that we would normally
only use for an HTML table.
So the property I want to set here
is going to be vertical align,
so vertical-align, colon space,
we're going to set that value to middle,
then a semi-colon.
Now if we hit save and go back to the browser,
we'll now see that the type is now centered
within that aside element.
So back to the CSS,
next line, let's choose text-align,
let's set that to center,
then a return,
and now let's just set a few padding properties.
So the padding now is going to be assigned
to the div element.
So we're going to set zero padding on the top and the bottom,
then a space, and then just 10 pixels
on the right and the left,
so that we always have a little bit of space
on the right and left between the text inside of the div
and the overall aside.
So now with these properties in place,
let's go back to the browser.
I'm going to come in here and resize this a little bit.
Since we are using table display type properties,
we should come here and set some responsive rules as well.
So if we scroll down in the CSS,
I've already set up a media query here
targeting a max-width of 600.
So let's come in here and just make a few type changes
inside of the aside when we're under 600 pixels.
So the first rule's going to target the paragraph element
inside of the div inside of the aside.
So we'll type aside div p, put in our brackets,
let's come in here and change the font size.
We're going to set this to 1.1 ems.
We can save that, we see the effect in the browser.
And then on the next line, we'll target
the last-of-type paragraph element.
So aside div p:last-of-type,
put in our brackets,
we're going to make a few changes here.
First we'll set the font size,
we'll set this to 1.8 ems.
I'll come in here and format this a little bit
put these on separate lines.
Next we're going to target margin top.
We're going to reset this to negative two pixels.
And then finally we'll come in here
and reset letter spacing to seven pixels.
So now with these in place, save your CSS,
go back to the browser, hit Reload.
Now when we resize the browser,
all of our type changes will take effect
when we get under 600 pixels,
we won't invoke any horizontal scrolling,
and we'll always have our type centered
regardless of the width of the browser.
So in this episode, we've learned to assign
table display properties to HTML elements
in order to take advantage of our browser's
table rendering capabilities,
without using the full HTML table markup.
And so with that, I'll conclude this episode,
and as always, thanks for watching.