- [Chris] Hi, this is Chris Converse, and in this episode,
we'll be exploring two options for centering
an absolute positioned element with CSS.
Since the properties for position include
top, right, bottom, and left, we'll need to account for
the element's width in order to
center the element horizontally,
or the element's height to center it vertically.
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.
Once you have the HTML file open, up in the head area,
you'll see we have a link to style.css,
which we'll open in a moment.
Down in the body area, we have a main article element,
and inside there we have an h1 and a paragraph element.
Now, to preview the layout we're gonna be working with,
you can open index.html up in a browser.
Here, you'll see we have our article element
with a blue outline, a slight drop shadow,
and a semi-transparent blue background.
The first thing we're going to do is bring a graphic
into the article element, and then we'll position that
later in the CSS file.
Let's go back to our HTML file.
Before the h1 tag, let's come in here and add an image tag.
So, less than sign, -i-m-g-, next we'll set source,
s-r-c-, we'll set this equal to images/icon_gondola.svg
and then end the tag.
If we save the HTML, go back to the browser, we'll now see
the graphic being brought in to the article page.
Now, since we didn't specify a width on the image element,
the browser will scale the graphic up as far as it can,
which will take up all of the available width
in the article element, but we'll take care of this
in the CSS file.
Let's go back to the exercise files.
Let's find style.css.
Let's open this in our text editor,
and let's first find our CSS rule
that uses the article selector,
which is down here on line 14.
Since we're going to be absolute positioning that image
inside of the article, we wanna make sure
that the positioning properties
are in relation to the article element.
Down here after box shadow, let's hit a return.
Let's come in here and set a position property of relative.
This won't change the position properties of article,
but anything positioned inside of article
will be positioned in relation to this element.
Now, let's scroll down in the CSS file.
After our paragraph element, let's come in here
and create a rule that targets the image
inside of the article.
Type article space i-m-g, put in our brackets.
Let's hit a few returns.
First, let's set a width property of 80 pixels.
Then, we'll set a height of 80 pixels as well.
Next, let's set a position property of absolute.
Let's set the top property to -40 pixels
so that will overlap the top border of the article element.
For the left property, let's come in here and set 50%.
With these in place, we can hit save.
We can go back to the browser, and now we can see
the problem that we talked about earlier,
which is the left edge of the image is at the center.
However, the graphic goes to the right-hand side
of that edge, so the graphic is not being centered
inside of this area.
Now, we have two ways we can adjust for this.
The first way is to set a margin-left property on the image.
Since we're using the left property to position this,
we can come down here in the CSS,
let's add a margin-left property, and let's set the property
to half of the width of the element.
So, we'll set this to -40 pixels.
Now, if I save my file, go back and reload in the browser,
we'll now see that that adjustment centers the graphic.
To visually represent what's happening here,
the width of the element is 80 pixels.
The left property being set to 50% means the left edge
of the image starts in the center.
So, we set a left-margin property of -40 pixels
to offset the position, making the graphic appear
in the center of the article element.
Now, another option we have is to use a CSS calculation.
Now, we talked about CSS calculations in an earlier episode,
and this will allow us to center the image
with a single CSS property.
Back in our CSS file, let's come in here and remove
margin-left, and for the left property,
let's come in here, and let's put 50% in parentheses.
Before the parentheses, let's type calc, -c-a-l-c,
and inside of the parentheses, let's hit a space after 50%,
then we'll type a hyphen to subtract, then a space,
and then we'll type 40px.
What this will do is calculate 50%
of the width of the article element,
and subtract an additional 40 pixels,
giving us exactly the same effect as we had
with the margin-left property of -40.
You can check that by reloading this in the browser.
Now, for demonstration purposes,
we can take this calculation and apply this
to the top property as well.
So, I'll come down here and copy the calc(50% - 40px),
let's paste that as the value of the top property,
save your file, go back and reload in the browser,
and we'll now see that the image
is not only centered horizontally,
but also centered vertically in the article element.
Now, since that particular property won't work
for this layout, I'll come back here
and change the top property to -40 pixels.
With these two techniques, you can center position elements
within a parent container.
Now, to learn more about positioning elements,
or using CSS calculations, check out these two
previous episodes available here in the library.
And, with that, I'll conclude this episode,
and, as always, thanks for watching.