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 mrx3
mrx3
8,742 Points

I'm having some trouble centering my embedded images in my site. (Codepen Included).

I've made a site with embedded images. I got the images to display side by side horizontally, which is what I want. But as you can see from my code pen they are not centered in the div. Also, there is no margin between the images, and I would like to have a little bit of space between the two images, and some space below each image as well Because the images are embedded if I use a percentage for the height the images will be different sizes, to fix this I changed the height to ems, and now they are all the same size. The code for the images starts on line 181 of my codepen. Can some please help me accomplish this, because I'm lost on how to do this. Thank you in advance.

(codepen: http://codepen.io/mike316/pen/ragLwX ).

mrx3
mrx3
8,742 Points

Oops I think I fixed it already :D

    .main-content {
    text-align: center;
  }
  .mobile-first {
    display: inline-block;
    width: 40%;
    height: 15em;
  }

I changed the display to inline-block, and after that I added .main-content and text-align center, and that centered the pictures perfectly.

Kester Browne
Kester Browne
24,414 Points

You will have to make your images the same size (width and height) using crop in photoshop. Using height 15em will distort the images. Also you can give each image a with of 45% with a margin of 2.5% on each side. This will make them line up side by side with a margin in between each one.

.mobile-first { float: left; width: 45%; margin: 2.5%; }