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 Kevin Faust
Kevin Faust
15,353 Points

centering images

im trying to center my image so i changed the display to inline-block. and then i used margin:0 auto to center my image but its not working. i tried using text-align:center but that doesnt work either.

my div just looks like this:

<div id="photomap"><img src="../img/map.jpg"></div>

and my css is this: 

 #photomap { 
    display:inline-block;
    margin: 0 auto;
}
Brandon Berger
Brandon Berger
3,947 Points

Add a container around #photomap set margin to 0 auto and then on your #photomap element add display:inline-block;

Kevin Faust
Kevin Faust
15,353 Points

hey brandon it still doesnt work

Brandon Berger
Brandon Berger
3,947 Points

are you trying to center the img within the div

Kevin Faust
Kevin Faust
15,353 Points

yea i want the image in the center and then put a border around it. i did what you wrote but the browser just ignores it and keeps the image in the left

Brandon Berger
Brandon Berger
3,947 Points

If you don't plan on having more than one image, you could probably get rid of display:inline-block;

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Is the goal to center the div within the page, or to center the image within the div?

You probably just want to center the image within it's containing div, which you can do by adding the margin rule to the image instead of the div.

#photomap img {
  display: block;
  margin: 0 auto;
}

If you want to center the div as an inline element (which seems kind of weird to me), you could add the following style to the parent element of #photomap. This work because inline-block elements are treated like text for the purposes of alignment.

body {  /* Replace body with the parent element of #photomap! */
  text-align: center;
}

When troubleshooting, I would also highly recommend adding borders to your elements to help you visualize what's going on.

#photomap { 
  border: 1px solid red;
}

#photomap img {
  border: 1px solid blue;
}

If you elaborate on your goals, I'll try to help you find the best solution for what you're trying to achieve.