How to center images

Question

Hi,

I have been learning how to make my own web page from the web design track but I don't know how to move images to the center of the page.

This is what I have done so far; I have the body of the page in a container. My images are in a 'div'. They have been given an id and a grid number.

div id="gallery" class="grid_12"

This is the CSS I wrote for the id 'gallery'. I know I can't 'float' them to the center so what code do I need to do to get them to the center of the page?

CSS #gallery img { border: 8px solid; color: #0000FF; margin: 0 0 20px 0; }

Answer 1 · 2014-02-04T12:21:06Z

February 4, 2014 12:21pm

Ok so I think I have a solution. You don't need to use the .grid_12 class on the container element just use .container, as it is getting a width and margin set by grid.css. Next the width of #gallery is calculated by taking the width of the image (350px) plus the left border (8px), plus the right border(8px) to give us a total width of 364px. In your case the width would be different, just find the width of your image and add width of border (both left and right border widths). Then remove the float by adding float: none; to the gallery and this should center everything on the page.

The code:

<div class="container clearfix">
    <div id="gallery">  
    <img src="http://placehold.it/350x150">

    <img src="http://placehold.it/350x150">

    <img src="http://placehold.it/350x150">

    <img src="http://placehold.it/350x150">
</div>
</div>

#gallery  {
width: 364px;
margin: 0 auto;
float: none;
}

#gallery img {
    border: 8px solid; 
     color: #0000FF; 
     margin: 0 0 20px 0
}

If you just remove the grid classes from your html entirely you can get the same results but this way allows you to still use the grid classes on the rest on your page. Hope this helps!

updated codepen link

Answer 2 · 2014-02-04T09:09:56Z

February 4, 2014 9:09am

you can give your table a margin of auto in your css.

table { margin: auto; }

Answer 3 · 2014-02-04T09:24:31Z

February 4, 2014 9:24am

How do i make a table if it's in a grid?

Answer 4 · 2014-02-04T09:24:47Z

February 4, 2014 9:24am

Hi, you could try setting a width on #gallery then use margin: 0 auto; to center it on your page.

For example

<div class="container">
    <div id="gallery" class="grid_12">
        <img src="img/image1.jpg">
    </div>
</div>

#gallery  {
    width: 300px;
    margin: 0 auto;
}

#gallery img {
      border: 8px solid; 
      color: #0000FF; 
      margin: 0 0 20px 0;
}

Hope this helps!

Answer 5 · 2014-02-04T09:47:18Z

February 4, 2014 9:47am

Thanks but I tried this and it just moved the images under each under.

Answer 6 · 2014-02-04T09:54:56Z

February 4, 2014 9:54am

Do you mean the images aren't centered or are centered but stack on top of one another like this?

Can you post your html and css code or a link so I can take a look?

Answer 7 · 2014-02-04T10:02:41Z

February 4, 2014 10:02am

They were stacked but not centered

<!DOCTYPE HTML> <html> <head> <meta htttp-equiv="Content-Type" content="text/html; charset-utf-8"/> <title>DIY</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix">

<div id="gallery" class="grid_12">
    <img src="img/1.jpg">

    <img src="img/2.jpg">

    <img src="img/3.jpg">

    <img src="img/4.jpg">
</div>
</div>

</body> </html>

CSS

#gallery img{ border: 8px solid; color: #0000FF; margin: 0 0 20px 0; }

Answer 8 · 2014-02-04T10:04:22Z

February 4, 2014 10:04am

Sorry. I posted the header, the title (DIY) and the container but for some reason this was all that showed up in my post.

Answer 9 · 2014-02-04T10:16:11Z

February 4, 2014 10:16am

When you post code try adding a blank line before the first 3 backticks as well as after the last, I've had loads of problems trying to get markdown to work, that might help.

Have you written any css for the grid_12 or container classes that could be interfering? Heres a link to my example on code pen so you can see I'm not lying to you! lol The images will stack but should be centered.

Answer 10 · 2014-02-04T10:30:22Z

February 4, 2014 10:30am

I don't know why but it's still not working. I did notice one difference between our code. You had width and height written next to your img. I don't have a width or height on my images.

Answer 11 · 2014-02-04T10:40:10Z

February 4, 2014 10:40am

The width and height shouldn't matter, it will just use the width and height of the actual image. Its only mentioned in my code because I used placehold.it to insert some dummy images. You do need to specify a width for #gallery though.

When you're refreshing your page to see changes are you clearing your cache? Sometimes the browser stores an old version of your css and other files and just simply refreshing won't show your updates, you need to clear the cache to get them to show.

Where did you get the grid_12 class from? Are you using a framework?

Other than that I'm kinda stuck for ideas, could you upload your code to codepen so I can see it in full?

Answer 12 · 2014-02-04T10:54:41Z

February 4, 2014 10:54am

I got the grid from treehouse web design track.

Not sure how to upload my framework. I'm hoping you can see it from this link.

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

Answer 13 · 2014-02-04T11:07:16Z

February 4, 2014 11:07am

You need to select #gallery and add a width and margin: 0 auto . So your complete CSS code would be

 #gallery {
  width: 300px;
  margin: 0 auto;
}

 #gallery img {
    border: 8px solid;
    color: #0000FF;
    margin: 0 0 20px 0;
  }

I've updated my codepen ,you can see it there.

EDIT: Looks like you have added #gallery maybe I viewed the page before you updated it. When you add in the images each one will go onto a new line. Does that solve your problem or are you still having trouble?

Answer 14 · 2014-02-04T11:23:30Z

February 4, 2014 11:23am

Yeah it worked in codepen but for some reason it's not working when i put the code into my own text editor.

Maybe it does have something to do with the code in the grid file.

Answer 15 · 2014-02-04T11:39:51Z

February 4, 2014 11:39am

Yep you're right on line 34 of grid.css a float: left is being applied to to the grid_12 class. Removing the float: left makes everything centered but that kind of defeats the point of building your design on a grid. I'm looking into a solution now but It might take me a while so thought I'd update you.

Answer 16 · 2014-02-04T11:45:09Z

February 4, 2014 11:45am

Thank you so much! That makes complete sense.

Answer 17 · 2014-02-04T14:05:40Z

February 4, 2014 2:05pm

Hi James,

I want to thank you so much this has helped me tremendously! I've managed to center the images for my website by using float: none and by giving the correct width of the image.

Thank you again for taking time out to answer my question!!

Answer 18 · 2014-02-04T15:06:34Z

February 4, 2014 3:06pm

Hey, No problem, I learnt a thing or 2 as well so it worked out well for both of us :)

Answer 19 · 2014-02-04T22:08:49Z

February 4, 2014 10:08pm

Great!

Welcome to the Treehouse Community

Looking to learn something new?

Megan Campbell

Megan Campbell

How to center images

19 Answers

James Anwyl

James Anwyl

Brenden Greiser

Brenden Greiser

Megan Campbell

Megan Campbell

James Anwyl

James Anwyl

Megan Campbell

Megan Campbell

James Anwyl

James Anwyl

Megan Campbell

Megan Campbell

Megan Campbell

Megan Campbell

James Anwyl

James Anwyl

Megan Campbell

Megan Campbell

James Anwyl

James Anwyl

Megan Campbell

Megan Campbell

James Anwyl

James Anwyl

Megan Campbell

Megan Campbell

James Anwyl

James Anwyl

Megan Campbell

Megan Campbell

Megan Campbell

Megan Campbell

James Anwyl

James Anwyl

Megan Campbell

Megan Campbell