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

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

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

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

Many thanks

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

@Jasen Carroll where do we need this 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

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

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?

try using this code

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

Hope this helps!

Kind Regards

erdrag

Unfortunately this did not work