Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Positioning Schemes Absolute Centering

Posted by Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

Got a little CSS puzzle for ya

Guil sets an icon in the center of a div by using absolute centering...

I however, type out the same CSS as shown in the video, and my icon goes up into the header miles away from said div..? here is my CSS and HTML

    <div class="extra-content col">
                <h3>Extra Content</h3>
                <p>Filet mignon turkey flank doner strip steak. Frankfurter ham hock turkey, venison sirloin pig chuck shank capicola hamburger doner spare ribs boudin.</p>
                <hr>
                <p> Drumstick bresaola meatloaf ham hock salami tri-tip landjaeger beef filet mignon biltong boudin turkey.</p>
                <div class="icon"></div>

.icon::after {
    content: " ";
    display: block;
    width: 150px;
    height: 90px;
    background: url('../img/icon.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;

}

What could be the problem?

3 Answers

John Fisher
John Fisher
7,974 Points
John Fisher
John Fisher
7,974 Points

I think you need to make it's parent element position: relative;

Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

Congratulations haha!, if i could award you treehouse points, i'd give you some.

Many thanks

Jasen Carroll
Jasen Carroll
9,958 Points

You can award treehouse point, I think you can approve John's answer or something and he'll get 12 points.

Andres Hamilton
Andres Hamilton
7,594 Points

@Jasen Carroll where do we need this points ?

Ion Jones
Ion Jones
11,299 Points
Ion Jones
Ion Jones
11,299 Points

When using absolute positioning, your element will position itself to the nearest positioned ancestor. In your case it sounds like the nearest positioned ancestor is your header element.

The Mozilla Developer Network can explain it much better than I can: https://developer.mozilla.org/en/docs/Web/CSS/position#Absolute_positioning

Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

Thanks for the reply, if that is the case, why have me and Guil got 2 separate results using the same code?

Ion Jones
Ion Jones
11,299 Points

As John said above, the parent element needs to be positioned in order for absolute positioning to get the desired effect. I'd imagine that Guil had his parent element positioned and maybe it just wasn't shown in the video?

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

try using this code

margin-left: auto;
margin-right: auto;

Hope this helps!

Kind Regards

erdrag

Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

Unfortunately this did not work