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
Daniel Tulchinsky
1,553 PointsCenter an image in a div of 1000px height
How to put <img id="logo"> in the center of a div with 1000px height?
7 Answers
Matt Campbell
9,767 PointsTake the height of the image, say 250px, and convert this into a percentage of the div height So 25%. Subtract that from 100% so 750px = 75% of div height.
Apply top margin of 75%/2 = 37.5%.
So, CSS code should go something like this.
#logo{ margin-top:37.5%; }
Do the same for horizontal axis.
I think it's right because that's how I do it but I've only been at this web design malarchy for a couple of weeks. :)
Ajinkya Borade
Courses Plus Student 16,635 PointsUse the below CSS to make that image absolute center:
img {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
(also, adding a code is really hard in forum, mods please addd a [code] tag)
Nik Parks
1,902 PointsWow, this is exactly what I needed. Thanks, Ajinkya!
Aaron Fryer
3,605 PointsHey Daniel
I had this issue a few weeks ago,
After searching around and trying a few things i settled with using the image as a background, centered......
<div style="background:url('logo.png') no-repeat center center"></div>
Give that a go!
Cheers,
Aaron
James Barnett
39,199 Pointsadding a code is really hard in forum, mods please add a [code] tag
Ajinkya - You can use code fences instead of indenting.
Check out this featured post, it talks about the code fence feature.
Daniel Tulchinsky
1,553 Pointsthank you guys I used 'Matthew Campbell' suggestion, and it works very well!
Matt Campbell
9,767 PointsGreat to hear, glad I could have helped! :)