Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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