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

mrx3
mrx3
8,742 Points
Posted by mrx3
mrx3
8,742 Points

Can someone please help center 3 images horizontally on a webpage?

I posted my code on codepen and I will post it below. I'm trying to center my images on my webpage. But, I have no idea how to go about this with CSS. I know you won't beadle to see the images but, maybe someone can take a look at my CSS and help me out. I want the three images to centered horizontally across the page. Thanks in advance for any help with this issue.

Codepen: http://codepen.io/mike316/pen/rljhL

2 Answers

Jeff Busch
Jeff Busch
19,287 Points

Hi Mr.x,

I think it will be difficult to get the images centered perfectly using an unordered or ordered list, you can get them close. Below is the css I changed:

.gallery ul {
  margin: auto;
  padding: 0;
}

.gallery li {
  float: left;
  width: 30%;
  margin: 0;
  padding: 3px;
  list-style: none;
}

One thing you could do is put the images in their own div, within the main-content div and do something like:

.main-content {
    width 100%;
}

.their-own-div {
    width: whatever;
    margin: auto;
}

img {
    width: 32%;
    margin: auto;
}

Good Luck, Jeff

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Sorry for the late reply, thank for your help. I guess I will have to put each picture in their own div like you suggest. Thanks again for your help :)

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

I am assuming you want them stacked on top of each other? If so change

.gallery li {
  float: left;
  width: 30%;
  margin: 0;
}

to 

.gallery li {
  display:block;
  width: 30%;
  margin: 0 auto;
}
mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Actually I want them to go horizontally across the page. For example: pic 1 pic2 pic3 I did do this below and it worked. I'm not sure if this is the correct way to do this but, it worked

.gallery {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

I don't want them to be on top of each other. Thank you for the reply and trying to help though. I really appreciate it.

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

Whoops let me check over that again. Sorry had a brain dead moment.

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

Nothing was working when I tried to test it. I ended up giving everything a height value. It looked like they were lined up well to me.