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

Posted by Rishit Shah
Rishit Shah
4,975 Points

Centering problem

I was trying to place an image at the absolute center of a div using relative positioning. However i am facing an issue where the image is not centering itself in the parent container. It is centering itself in the main wrapping container. Here is my code:

HTML:

" <nav style = "background-color:#fff;"> <div class="list-tabs"><h3>Profile</h3><div class="img-container"><img src = "img/tri.jpg" class="nav-icons"></div></div> <div class="list-tabs"><h3>Questions</h3><div class="img-container"><img src = "img/tri.jpg" class="nav-icons"></div></div> <div class="list-tabs"><h3>Internships</h3><div class="img-container"><img src = "img/tri.jpg" class="nav-icons"></div></div> "

CSS:

.layout3{ width:70%; margin:auto; padding-top:110px; text-align:center; }

.layout3:after , .list-tabs:after{ content:""; display:table; clear:both;

}

.list-tabs{ width:100%; height:100%; border:1px solid darkgrey; border-bottom:none; padding:10px;

}

.list-tabs>h3{ float:left; display:inline-block; }

} .img-container{ height:40px; width:100%; position:relative; }

.nav-icons{ position:absolute; margin:0; top:50%; bottom:50%; right:10px; width:10px; height:10px; }

Since .img-container has relative positioning, I was expecting the nav-icons to be at the center of it. However it places itself in the center of .list-tabs. I want to know why is that.

P.S I want it vertically aligned. the html is not being displayed for some reason.

Dale Bailey
Dale Bailey
20,269 Points

You have no html above, do you want it to be central horizontally? vertically? both? you have no "main wrapping"? in your css, you have no img in your css and no absolute property. Ideally:

parent element {
    position: relative;
}

child-element {
    position: absolute;
    top: ;
    left: ;
}

1 Answer

Camila N
Camila N
10,677 Points

Put position: relative; in the parent container.

Rishit Shah
Rishit Shah
4,975 Points

Thankyou for the answer. But I have already added postion relative to parent-element".img-container" and position:absolute to "nav-icons" along with other code. It is not working. the image having class .nav-icons is centering itself wrt ".list-tabs" and not "img-container"

Camila N
Camila N
10,677 Points

Can you copy te code in a codepen or something so we can see it?

Rishit Shah
Rishit Shah
4,975 Points

http://codepen.io/anon/pen/qOWMKo

here it is. Although the image on the far right of the section appears to be in center, use inspect-element to check out the position of ".nav-icons"(one with absolute positioning) wrt ".img-container"(the parent element with relative postioning)

Camila N
Camila N
10,677 Points

in .nav-icons{}, remove bottom: 50% and add margin-top: -5px;

When vertically centering something with absolute positioning, you first put the top: 50% and then you put half of its height as a negative margin-top to put it right in the center.

Please tell me if it worked now.

Rishit Shah
Rishit Shah
4,975 Points

Yes it worked. Thank you for taking time and solving my problem.