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

2
00:00:03.04 --> 00:00:05.05
we'll be exploring two
options for centering

3
00:00:05.05 --> 00:00:08.06
an absolute positioned element with CSS.

4
00:00:08.06 --> 00:00:10.04
Since the properties for position include

5
00:00:10.04 --> 00:00:13.02
top, right, bottom, and left,
we'll need to account for

6
00:00:13.02 --> 00:00:14.05
the element's width in order to

7
00:00:14.05 --> 00:00:16.04
center the element horizontally,

8
00:00:16.04 --> 00:00:20.02
or the element's height
to center it vertically.

9
00:00:20.02 --> 00:00:21.07
If you'd like to follow along with me,

10
00:00:21.07 --> 00:00:23.07
download the exercise
files, and let's begin

11
00:00:23.07 --> 00:00:27.07
by opening index.html in a text editor.

12
00:00:27.07 --> 00:00:30.03
Once you have the HTML file
open, up in the head area,

13
00:00:30.03 --> 00:00:32.04
you'll see we have a link to style.css,

14
00:00:32.04 --> 00:00:34.07
which we'll open in a moment.

15
00:00:34.07 --> 00:00:37.06
Down in the body area, we
have a main article element,

16
00:00:37.06 --> 00:00:41.00
and inside there we have an
h1 and a paragraph element.

17
00:00:41.00 --> 00:00:43.00
Now, to preview the layout
we're gonna be working with,

18
00:00:43.00 --> 00:00:45.08
you can open index.html up in a browser.

19
00:00:45.08 --> 00:00:47.05
Here, you'll see we
have our article element

20
00:00:47.05 --> 00:00:49.09
with a blue outline, a slight drop shadow,

21
00:00:49.09 --> 00:00:52.06
and a semi-transparent blue background.

22
00:00:52.06 --> 00:00:54.04
The first thing we're going
to do is bring a graphic

23
00:00:54.04 --> 00:00:56.06
into the article element,
and then we'll position that

24
00:00:56.06 --> 00:00:58.06
later in the CSS file.

25
00:00:58.06 --> 00:01:01.00
Let's go back to our HTML file.

26
00:01:01.00 --> 00:01:04.02
Before the h1 tag, let's come
in here and add an image tag.

27
00:01:04.02 --> 00:01:09.03
So, less than sign, -i-m-g-,
next we'll set source,

28
00:01:09.03 --> 00:01:17.04
s-r-c-, we'll set this equal
to images/icon_gondola.svg

29
00:01:17.04 --> 00:01:19.04
and then end the tag.

30
00:01:19.04 --> 00:01:21.09
If we save the HTML, go back
to the browser, we'll now see

31
00:01:21.09 --> 00:01:25.00
the graphic being brought
in to the article page.

32
00:01:25.00 --> 00:01:28.01
Now, since we didn't specify
a width on the image element,

33
00:01:28.01 --> 00:01:30.06
the browser will scale the
graphic up as far as it can,

34
00:01:30.06 --> 00:01:32.00
which will take up all
of the available width

35
00:01:32.00 --> 00:01:33.09
in the article element,
but we'll take care of this

36
00:01:33.09 --> 00:01:35.04
in the CSS file.

37
00:01:35.04 --> 00:01:37.05
Let's go back to the exercise files.

38
00:01:37.05 --> 00:01:39.08
Let's find style.css.

39
00:01:39.08 --> 00:01:42.03
Let's open this in our text editor,

40
00:01:42.03 --> 00:01:44.06
and let's first find our CSS rule

41
00:01:44.06 --> 00:01:46.08
that uses the article selector,

42
00:01:46.08 --> 00:01:48.07
which is down here on line 14.

43
00:01:48.07 --> 00:01:50.09
Since we're going to be
absolute positioning that image

44
00:01:50.09 --> 00:01:52.08
inside of the article, we wanna make sure

45
00:01:52.08 --> 00:01:54.02
that the positioning properties

46
00:01:54.02 --> 00:01:57.02
are in relation to the article element.

47
00:01:57.02 --> 00:02:00.03
Down here after box
shadow, let's hit a return.

48
00:02:00.03 --> 00:02:03.09
Let's come in here and set a
position property of relative.

49
00:02:03.09 --> 00:02:06.04
This won't change the position
properties of article,

50
00:02:06.04 --> 00:02:08.06
but anything positioned inside of article

51
00:02:08.06 --> 00:02:12.01
will be positioned in
relation to this element.

52
00:02:12.01 --> 00:02:14.05
Now, let's scroll down in the CSS file.

53
00:02:14.05 --> 00:02:17.07
After our paragraph
element, let's come in here

54
00:02:17.07 --> 00:02:19.03
and create a rule that targets the image

55
00:02:19.03 --> 00:02:21.03
inside of the article.

56
00:02:21.03 --> 00:02:26.05
Type article space i-m-g,
put in our brackets.

57
00:02:26.05 --> 00:02:28.05
Let's hit a few returns.

58
00:02:28.05 --> 00:02:33.00
First, let's set a width
property of 80 pixels.

59
00:02:33.00 --> 00:02:36.09
Then, we'll set a height
of 80 pixels as well.

60
00:02:36.09 --> 00:02:42.06
Next, let's set a position
property of absolute.

61
00:02:42.06 --> 00:02:45.06
Let's set the top property to -40 pixels

62
00:02:45.06 --> 00:02:49.01
so that will overlap the top
border of the article element.

63
00:02:49.01 --> 00:02:52.09
For the left property, let's
come in here and set 50%.

64
00:02:52.09 --> 00:02:54.07
With these in place, we can hit save.

65
00:02:54.07 --> 00:02:56.07
We can go back to the
browser, and now we can see

66
00:02:56.07 --> 00:02:58.06
the problem that we talked about earlier,

67
00:02:58.06 --> 00:03:03.04
which is the left edge of
the image is at the center.

68
00:03:03.04 --> 00:03:05.08
However, the graphic goes
to the right-hand side

69
00:03:05.08 --> 00:03:08.05
of that edge, so the graphic
is not being centered

70
00:03:08.05 --> 00:03:10.01
inside of this area.

71
00:03:10.01 --> 00:03:12.01
Now, we have two ways
we can adjust for this.

72
00:03:12.01 --> 00:03:15.06
The first way is to set a
margin-left property on the image.

73
00:03:15.06 --> 00:03:18.01
Since we're using the left
property to position this,

74
00:03:18.01 --> 00:03:20.07
we can come down here in the CSS,

75
00:03:20.07 --> 00:03:24.00
let's add a margin-left property,
and let's set the property

76
00:03:24.00 --> 00:03:26.04
to half of the width of the element.

77
00:03:26.04 --> 00:03:28.09
So, we'll set this to -40 pixels.

78
00:03:28.09 --> 00:03:31.08
Now, if I save my file, go
back and reload in the browser,

79
00:03:31.08 --> 00:03:34.08
we'll now see that that
adjustment centers the graphic.

80
00:03:34.08 --> 00:03:36.08
To visually represent
what's happening here,

81
00:03:36.08 --> 00:03:38.08
the width of the element is 80 pixels.

82
00:03:38.08 --> 00:03:42.01
The left property being set
to 50% means the left edge

83
00:03:42.01 --> 00:03:44.04
of the image starts in the center.

84
00:03:44.04 --> 00:03:47.01
So, we set a left-margin
property of -40 pixels

85
00:03:47.01 --> 00:03:49.08
to offset the position,
making the graphic appear

86
00:03:49.08 --> 00:03:53.04
in the center of the article element.

87
00:03:53.04 --> 00:03:56.09
Now, another option we have
is to use a CSS calculation.

88
00:03:56.09 --> 00:04:00.00
Now, we talked about CSS
calculations in an earlier episode,

89
00:04:00.00 --> 00:04:01.07
and this will allow us to center the image

90
00:04:01.07 --> 00:04:03.08
with a single CSS property.

91
00:04:03.08 --> 00:04:06.09
Back in our CSS file, let's
come in here and remove

92
00:04:06.09 --> 00:04:11.06
margin-left, and for the left property,

93
00:04:11.06 --> 00:04:17.01
let's come in here, and
let's put 50% in parentheses.

94
00:04:17.01 --> 00:04:21.05
Before the parentheses,
let's type calc, -c-a-l-c,

95
00:04:21.05 --> 00:04:25.08
and inside of the parentheses,
let's hit a space after 50%,

96
00:04:25.08 --> 00:04:29.00
then we'll type a hyphen
to subtract, then a space,

97
00:04:29.00 --> 00:04:31.04
and then we'll type 40px.

98
00:04:31.04 --> 00:04:33.05
What this will do is calculate 50%

99
00:04:33.05 --> 00:04:35.02
of the width of the article element,

100
00:04:35.02 --> 00:04:37.09
and subtract an additional 40 pixels,

101
00:04:37.09 --> 00:04:40.02
giving us exactly the
same effect as we had

102
00:04:40.02 --> 00:04:43.05
with the margin-left property of -40.

103
00:04:43.05 --> 00:04:46.05
You can check that by
reloading this in the browser.

104
00:04:46.05 --> 00:04:47.09
Now, for demonstration purposes,

105
00:04:47.09 --> 00:04:49.08
we can take this
calculation and apply this

106
00:04:49.08 --> 00:04:52.04
to the top property as well.

107
00:04:52.04 --> 00:04:56.06
So, I'll come down here and
copy the calc(50% - 40px),

108
00:04:56.06 --> 00:04:59.07
let's paste that as the
value of the top property,

109
00:04:59.07 --> 00:05:02.02
save your file, go back
and reload in the browser,

110
00:05:02.02 --> 00:05:03.02
and we'll now see that the image

111
00:05:03.02 --> 00:05:04.08
is not only centered horizontally,

112
00:05:04.08 --> 00:05:08.00
but also centered vertically
in the article element.

113
00:05:08.00 --> 00:05:09.04
Now, since that particular
property won't work

114
00:05:09.04 --> 00:05:10.09
for this layout, I'll come back here

115
00:05:10.09 --> 00:05:14.06
and change the top property to -40 pixels.

116
00:05:14.06 --> 00:05:17.03
With these two techniques, you
can center position elements

117
00:05:17.03 --> 00:05:19.04
within a parent container.

118
00:05:19.04 --> 00:05:20.09
Now, to learn more about
positioning elements,

119
00:05:20.09 --> 00:05:23.07
or using CSS calculations,
check out these two

120
00:05:23.07 --> 00:05:26.06
previous episodes available
here in the library.

121
00:05:26.06 --> 00:05:28.04
And, with that, I'll
conclude this episode,

122
00:05:28.04 --> 00:05:31.04
and, as always, thanks for watching.