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
Ryan Decker
3,451 Pointscss styling
Please for the love of god help me.
How do you center an image in CSS? In my HTML file the only thing I have is: <img src="img/senob-test.jpg">
I can't for the life of me figure out what to put in css.
9 Answers
Adam Duffield
30,494 Pointstry img {margin-left:auto; margin-right:auto;}
Emma Willmann
Treehouse Project ReviewerYour html didn't show up. Just off the top of my head I would say to give the img elementthe margin property set with auto. That should center it with in the element both left to right and top to bottom. If you just want left to right centering, then make it margin: 0px auto;
Ryan Decker
3,451 PointsThat didn't work either :(
Adam Duffield
30,494 PointsShow us some code and we may be able to help you :)
Ryan Decker
3,451 Points ,,,<img src="img/senob.jpg">,,,
,,, img {margin-left:auto; margin-right:auto;} ,,,
Adam Duffield
30,494 Pointsassuming thats in your Css file? but whats your html code look like? including the head section :)
Ryan Decker
3,451 PointsI can't seem to get the code to display. Everything is correct on my html page ( i just copied and pasted the global markup and added my CSS directory).
Literally the only thing on my HTML doc is the img src
Adam Duffield
30,494 PointsTry this...
html, body {width:100%;}
img {margin-left:40%; margin-right:40%; width:20%;
}
Ryan Decker
3,451 PointsAdam. You're a BAUSSS! That worked, but it seemed to "zoom in" on the logo a lot closer for some reason.
This CSS also worked:
,,, img {display: block;margin-left: auto margin-right: auto } ,,,
Ryan Decker
3,451 PointsI'll check it out for sure! I think I am getting ahead of myself as I just started learning how to code.
Adam Duffield
30,494 PointsYou'll do fine mate, i've only been coding for about a month and HTML & CSS feel like 2nd nature and moving into PHP & Javascript now, just keep to this forum or google stuff
Adam Duffield
30,494 Pointsits simple maths dude, take the time to experiment and see what it does, your body equals up to 100% of the screen your stretched your img to 20% and your 40% away from the left and right. If you want your image smaller or larger change the width to say 10% and your margin-left/right to 45%.
Ryan Decker
3,451 PointsThanks for explaining. This makes complete sense! Assuming this method gives one the ability to move an image to the left or right; does it also allow for text to be added to either the left or right?
Adam Duffield
30,494 PointsThat is where you should be looking deeper into floats my friend :) This course should help you a LOT! i know it did me ... http://teamtreehouse.com/library/css-layout-techniques
Emma Willmann
Treehouse Project ReviewerRyan Decker I was just about to post the other way. The reason it 'zooms in' with Adams code is probably because of the width property limiting it to 20% of the window size. His way is more responsive, as the image with change size in proportion to the browser. This way keeps the image the same size.
,,, body{ width:100%; }
img { display: block; margin-left: auto; margin-right: auto; } ,,,
Ryan Decker
3,451 PointsThanks for clarifying! This makes a lot of sense!
Ryan Decker
3,451 PointsRyan Decker
3,451 PointsDidn't work :(