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 Michael Caveney
Michael Caveney
50,144 Points

Centering images inside of div

I'm working on a photo gallery project, and I'm stuck with getting several elements (pictures) centered inside of a div. I tried flexbox, but I'm stuck on an exact method. There's obvious space on the right side of the div (that shrinks as the pages shrinks at various responsive breakpoints). Workspace is here:

https://teamtreehouse.com/workspaces/20527652#

Any insight would be appreciated!

Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi Michael, your page is displaying this: http://i.imgur.com/9oe0IXx.png

7 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi Michael, here is my way: http://codepen.io/anon/pen/PGWxJg?editors=1100

The colors and borders are just to identify what is what.

Michael Caveney
Michael Caveney
50,144 Points

Kalil- This definitely achieved the desired effect for me with some minor tweaking. It looks like the key thing I overlooked was individually centering the images. Thanks for your help!

Graham Tonelli
Graham Tonelli
11,968 Points
Graham Tonelli
Graham Tonelli
11,968 Points

Centering pictures in css has many different methods. If you post your code here it will be easier to see. If you are centering one image per line on small displays for example the text-align property can be used. If you're using a more responsive layout with flexbox for example you can give them defined widths like 33%, and reduce your margins/paddings. Changing their display property to inline block, instead of flex, for example can also be used.

Hope this helps!

Michael Caveney
Michael Caveney
50,144 Points
Michael Caveney
Michael Caveney
50,144 Points

Code, in full, first the HTML:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">
    <title>My Photo Gallery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>

<body>


  <div class="header-content">
    <h1>My Photo Gallery</h1>

    <div class="search">
      <input type="text" id="search_box">
      <input type="button" id="button" value="Search" onClick="">
    </div>
</div>


 <div class="main-content">

    <img src="images/thumbnails/01.jpg" alt="" />

    <img src="images/thumbnails/02.jpg" alt="" />

    <img src="images/thumbnails/03.jpg" alt="" />

    <img src="images/thumbnails/04.jpg" alt="" />

    <img src="images/thumbnails/05.jpg" alt="" />

    <img src="images/thumbnails/06.jpg" alt=""/>

    <img src="images/thumbnails/07.jpg" alt=""/>

    <img src="images/thumbnails/08.jpg" alt=""/>

    <img src="images/thumbnails/09.jpg" alt=""/>

    <img src="images/thumbnails/10.jpg" alt=""/>

    <img src="images/thumbnails/11.jpg" alt=""/>

    <img src="images/thumbnails/12.jpg" alt=""/>

</div>

 </body>

</html>

And the CSS:

//* 1 picture to a row*//

h1 {
  display: inline-block;
   font-family: 'Inconsolata', monospace;
  margin: 1%;
}

img {
  padding: 3%;
}

.search {
  margin: 1%;
}

.header-content {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 95%;
}


.main-content {
  margin: 0 auto;
  padding: 0;
  max-width: 70%;
}

@media screen and (min-width: 768px) {
    //* 2 pictures to a row*//
    .main-content {
  margin: 0 auto;
  max-width: 80%;
}
}  

@media screen and (min-width: 1024px) {
    //* 4 pictures to a row*//
    .main-content {
  margin: 0 auto;
  max-width: 95%;
}

}
Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi Michael, I made this: http://codepen.io/anon/pen/mARBqp?editors=1100

I've put some random images and applied a background color on the container div (so I can see it).

How exactly do you want this images?

Michael Caveney
Michael Caveney
50,144 Points
Michael Caveney
Michael Caveney
50,144 Points

I need to see tablet and mobile views to be certain, but in rows of 4 for desktop, 2 for table, and probably a column of 1 for mobile.

Graham Tonelli
Graham Tonelli
11,968 Points
Graham Tonelli
Graham Tonelli
11,968 Points

Hi Michael in your code you have specified a width for the parent container of your images, but not the images themselves! Your parent container is .main-content and has a width of 80% in your first breakpoint for example. Without setting your images to at least half of that, and giving them no margin or padding, Your images will be different sizes.

For example:

@media screen and (min-width: 768px) {

//*Two Pictures per row*//

.main-content {
  margin: 0 auto;
  max-width: 80%;
  padding: 0;
 }

.main-content img {
  width: 46%;
  margin: 2%;
  padding: 0;
 }
}

Note: Ensure you set your margins and paddings so that horizontally they add up to 100%. Here I have set the padding to 0, and the margins to 2%. Since there will be two columns per row, the margins must be calculated as 2% on the left and right for both pictures, making the total for margins 8%. I then used the remaining 92% for the pictures themselves and set their widths to 46%. Also note that when you are using relative units for sizes, the width calculated is relative to the parent container, not the entire page.

Hope this helps! Cheers

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

You are very welcome!