1
00:00:01.04 --> 00:00:03.06
- [Chris] Hi, this is Chris
Converse, and in this episode,

2
00:00:03.06 --> 00:00:05.06
we'll take a look at
vertically centering text

3
00:00:05.06 --> 00:00:07.03
within a parent element.

4
00:00:07.03 --> 00:00:09.01
While there are a few
ways you can do this,

5
00:00:09.01 --> 00:00:12.01
either using margin and padding
or flex display properties,

6
00:00:12.01 --> 00:00:13.09
one of the most efficient ways is to use

7
00:00:13.09 --> 00:00:16.03
the table display properties in CSS,

8
00:00:16.03 --> 00:00:18.01
allowing us take advantage of a table cell

9
00:00:18.01 --> 00:00:22.03
without the rigid and extraneous
HTML of an actual table.

10
00:00:22.03 --> 00:00:23.09
So if you'd like to follow along with me,

11
00:00:23.09 --> 00:00:26.05
download the exercise files,
and let's begin by opening

12
00:00:26.05 --> 00:00:30.09
index.html in a text editor.

13
00:00:30.09 --> 00:00:32.04
Now once you have the HTML file open,

14
00:00:32.04 --> 00:00:34.02
you'll see up in the heading area here

15
00:00:34.02 --> 00:00:36.05
we have a link to style.css,

16
00:00:36.05 --> 00:00:38.03
which we'll open in a few minutes.

17
00:00:38.03 --> 00:00:41.05
And inside the body area we
have a main article element,

18
00:00:41.05 --> 00:00:43.05
and in here we have an aside.

19
00:00:43.05 --> 00:00:46.00
Now it's the aside element
here where I want to

20
00:00:46.00 --> 00:00:49.07
center vertically these
two paragraph elements.

21
00:00:49.07 --> 00:00:51.05
Now to take a look at the layout so far,

22
00:00:51.05 --> 00:00:55.03
you can take index.html and
open this up in a browser.

23
00:00:55.03 --> 00:00:56.05
And then once in the browser,

24
00:00:56.05 --> 00:00:58.03
you'll see the aside element here.

25
00:00:58.03 --> 00:01:00.02
We can see Visit Beautiful Amsterdam,

26
00:01:00.02 --> 00:01:02.03
the two paragraph elements
that are showing here,

27
00:01:02.03 --> 00:01:05.01
and I've gone ahead and
put in a background image.

28
00:01:05.01 --> 00:01:06.06
So now, in order to center these,

29
00:01:06.06 --> 00:01:08.07
and to make use of the
table display properties,

30
00:01:08.07 --> 00:01:12.01
we do need to have one
additional HTML element in place.

31
00:01:12.01 --> 00:01:15.01
So inside of the aside in the HTML,

32
00:01:15.01 --> 00:01:17.04
let's come in here an put both
of these paragraph elements

33
00:01:17.04 --> 00:01:20.00
inside of a div tag.

34
00:01:20.00 --> 00:01:21.08
Let's come here and add a less than sign,

35
00:01:21.08 --> 00:01:26.02
and add a div tag before
the first paragraph element.

36
00:01:26.02 --> 00:01:28.04
Next I'll indent these,

37
00:01:28.04 --> 00:01:29.07
and then after the paragraph elements,

38
00:01:29.07 --> 00:01:32.07
let's end the div tag.

39
00:01:32.07 --> 00:01:36.00
And so now with our HTML
modified, let's save the HTML,

40
00:01:36.00 --> 00:01:38.01
let's go back to the exercise files,

41
00:01:38.01 --> 00:01:42.08
let's find style.css and let's
open this in our text editor.

42
00:01:42.08 --> 00:01:45.05
Once inside, let's scroll down,

43
00:01:45.05 --> 00:01:47.03
and the first thing I'd
like to do is finish

44
00:01:47.03 --> 00:01:49.04
styling the text inside of the aside.

45
00:01:49.04 --> 00:01:52.01
So down here I have a rule
that's targeting the paragraph

46
00:01:52.01 --> 00:01:54.02
inside of the aside.

47
00:01:54.02 --> 00:01:56.08
So I'll come in here and copy that.

48
00:01:56.08 --> 00:01:59.05
Let's add a few lines, let's
paste that on the next line,

49
00:01:59.05 --> 00:02:02.01
before the media query,

50
00:02:02.01 --> 00:02:10.05
and let's change the p to p:last-of-type.

51
00:02:10.05 --> 00:02:12.08
So now I'm going to target
the last paragraph element

52
00:02:12.08 --> 00:02:14.08
inside of the aside,

53
00:02:14.08 --> 00:02:17.06
and let's come in here and
change a few properties.

54
00:02:17.06 --> 00:02:20.06
First let's come in here
and change font size.

55
00:02:20.06 --> 00:02:25.06
We're going to set the
font size to 2.3 ems.

56
00:02:25.06 --> 00:02:29.09
Next line, we're going to
set the letter spacing,

57
00:02:29.09 --> 00:02:33.07
we're going to set this to 14 pixels.

58
00:02:33.07 --> 00:02:36.01
And then finally, we're
going to set the margin

59
00:02:36.01 --> 00:02:38.07
to negative six pixels on the top,

60
00:02:38.07 --> 00:02:40.03
so it'll be a little bit closer to the

61
00:02:40.03 --> 00:02:42.04
paragraph element before it,

62
00:02:42.04 --> 00:02:44.04
then a space, then zero for the right,

63
00:02:44.04 --> 00:02:47.07
zero for the bottom and zero for the left.

64
00:02:47.07 --> 00:02:49.04
With these in place I'll hit Save.

65
00:02:49.04 --> 00:02:50.08
Reload in the browser.

66
00:02:50.08 --> 00:02:54.00
And now we can see those new
type properties taking effect.

67
00:02:54.00 --> 00:02:55.09
So now let's go back to the CSS,

68
00:02:55.09 --> 00:02:58.00
and what we're going
to do is we're going to

69
00:02:58.00 --> 00:03:00.02
come into the aside element here,

70
00:03:00.02 --> 00:03:03.00
and we need to set a display type on here.

71
00:03:03.00 --> 00:03:06.03
So after the font family,
let's hit a return,

72
00:03:06.03 --> 00:03:11.06
let's set the display type to a table.

73
00:03:11.06 --> 00:03:14.08
So display: table;

74
00:03:14.08 --> 00:03:17.00
so now the browser's
going to treat that aside

75
00:03:17.00 --> 00:03:20.07
as if it were an HTML table.

76
00:03:20.07 --> 00:03:22.01
Let's scroll down.

77
00:03:22.01 --> 00:03:24.06
After the aside, let's hit a return.

78
00:03:24.06 --> 00:03:28.07
Now let's target the div element
that's inside of the aside.

79
00:03:28.07 --> 00:03:31.05
So we'll type aside space div,

80
00:03:31.05 --> 00:03:34.07
another space, put in our brackets,

81
00:03:34.07 --> 00:03:37.06
and then here we're going
to set a display property

82
00:03:37.06 --> 00:03:41.07
to table-cell then a semi-colon.

83
00:03:41.07 --> 00:03:44.02
And now that this has table
cell display properties,

84
00:03:44.02 --> 00:03:46.05
we can now use CSS properties
that we would normally

85
00:03:46.05 --> 00:03:49.03
only use for an HTML table.

86
00:03:49.03 --> 00:03:50.03
So the property I want to set here

87
00:03:50.03 --> 00:03:52.02
is going to be vertical align,

88
00:03:52.02 --> 00:03:55.09
so vertical-align, colon space,

89
00:03:55.09 --> 00:03:57.07
we're going to set that value to middle,

90
00:03:57.07 --> 00:03:59.06
then a semi-colon.

91
00:03:59.06 --> 00:04:01.06
Now if we hit save and
go back to the browser,

92
00:04:01.06 --> 00:04:03.06
we'll now see that the
type is now centered

93
00:04:03.06 --> 00:04:06.06
within that aside element.

94
00:04:06.06 --> 00:04:08.02
So back to the CSS,

95
00:04:08.02 --> 00:04:12.07
next line, let's choose text-align,

96
00:04:12.07 --> 00:04:15.02
let's set that to center,

97
00:04:15.02 --> 00:04:16.02
then a return,

98
00:04:16.02 --> 00:04:18.08
and now let's just set a
few padding properties.

99
00:04:18.08 --> 00:04:20.05
So the padding now is going to be assigned

100
00:04:20.05 --> 00:04:21.09
to the div element.

101
00:04:21.09 --> 00:04:24.02
So we're going to set zero
padding on the top and the bottom,

102
00:04:24.02 --> 00:04:26.06
then a space, and then just 10 pixels

103
00:04:26.06 --> 00:04:28.03
on the right and the left,

104
00:04:28.03 --> 00:04:29.07
so that we always have
a little bit of space

105
00:04:29.07 --> 00:04:32.02
on the right and left between
the text inside of the div

106
00:04:32.02 --> 00:04:35.03
and the overall aside.

107
00:04:35.03 --> 00:04:36.06
So now with these properties in place,

108
00:04:36.06 --> 00:04:38.03
let's go back to the browser.

109
00:04:38.03 --> 00:04:40.08
I'm going to come in here
and resize this a little bit.

110
00:04:40.08 --> 00:04:43.02
Since we are using table
display type properties,

111
00:04:43.02 --> 00:04:46.06
we should come here and set
some responsive rules as well.

112
00:04:46.06 --> 00:04:48.00
So if we scroll down in the CSS,

113
00:04:48.00 --> 00:04:49.09
I've already set up a media query here

114
00:04:49.09 --> 00:04:52.07
targeting a max-width of 600.

115
00:04:52.07 --> 00:04:54.08
So let's come in here and
just make a few type changes

116
00:04:54.08 --> 00:04:58.04
inside of the aside when
we're under 600 pixels.

117
00:04:58.04 --> 00:05:00.06
So the first rule's going to
target the paragraph element

118
00:05:00.06 --> 00:05:03.05
inside of the div inside of the aside.

119
00:05:03.05 --> 00:05:10.08
So we'll type aside div
p, put in our brackets,

120
00:05:10.08 --> 00:05:13.00
let's come in here and
change the font size.

121
00:05:13.00 --> 00:05:17.02
We're going to set this to 1.1 ems.

122
00:05:17.02 --> 00:05:20.07
We can save that, we see
the effect in the browser.

123
00:05:20.07 --> 00:05:22.05
And then on the next line, we'll target

124
00:05:22.05 --> 00:05:25.05
the last-of-type paragraph element.

125
00:05:25.05 --> 00:05:32.05
So aside div p:last-of-type,

126
00:05:32.05 --> 00:05:33.07
put in our brackets,

127
00:05:33.07 --> 00:05:35.06
we're going to make a few changes here.

128
00:05:35.06 --> 00:05:37.01
First we'll set the font size,

129
00:05:37.01 --> 00:05:42.01
we'll set this to 1.8 ems.

130
00:05:42.01 --> 00:05:43.05
I'll come in here and
format this a little bit

131
00:05:43.05 --> 00:05:46.06
put these on separate lines.

132
00:05:46.06 --> 00:05:49.00
Next we're going to target margin top.

133
00:05:49.00 --> 00:05:53.01
We're going to reset this
to negative two pixels.

134
00:05:53.01 --> 00:05:54.07
And then finally we'll come in here

135
00:05:54.07 --> 00:05:58.06
and reset letter spacing to seven pixels.

136
00:05:58.06 --> 00:06:00.07
So now with these in place, save your CSS,

137
00:06:00.07 --> 00:06:03.00
go back to the browser, hit Reload.

138
00:06:03.00 --> 00:06:05.00
Now when we resize the browser,

139
00:06:05.00 --> 00:06:06.07
all of our type changes will take effect

140
00:06:06.07 --> 00:06:08.06
when we get under 600 pixels,

141
00:06:08.06 --> 00:06:11.01
we won't invoke any horizontal scrolling,

142
00:06:11.01 --> 00:06:12.07
and we'll always have our type centered

143
00:06:12.07 --> 00:06:15.05
regardless of the width of the browser.

144
00:06:15.05 --> 00:06:17.03
So in this episode,
we've learned to assign

145
00:06:17.03 --> 00:06:20.00
table display properties to HTML elements

146
00:06:20.00 --> 00:06:21.05
in order to take
advantage of our browser's

147
00:06:21.05 --> 00:06:23.05
table rendering capabilities,

148
00:06:23.05 --> 00:06:26.03
without using the full HTML table markup.

149
00:06:26.03 --> 00:06:28.04
And so with that, I'll
conclude this episode,

150
00:06:28.04 --> 00:06:31.03
and as always, thanks for watching.