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 erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Centering problem!

i have some wierd centering issues, i have some photos, and i want them centered with the containing div, heres how it looks

http://imgur.com/qxZqslf (look at the arrows)

heres the code for the photos

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery img {
  width: 80%;
  height: 80%;
}

#gallery li {
  float: left;
  width: 28.3333%;
  margin: 2.5%;
  margin-bottom: 10%;

}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.8em;
}

footer {
  clear:both;
}

.images {
  border: 2px solid black;
  border-radius: 20px;
}

and heres the containing div code

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 5%;
}
Stephen Little
Stephen Little
8,312 Points

Not sure but in your container you could try text-align: center; maybe? or maybe add that into your #gallery not sure. Maybe post the html with your css in it?

hope this helps in some way :)

cheers! Stephen

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

text-align: center;

worked when i put it in the #gallery thanks.

but im not sure how this was a problem in the first place, my #gallery was centered... hmmm

well thanks for the help! appreciate it alot:)

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It looks like a padding issue to me. Did you mean to put a 5% padding on your #gallery li a p.

Try changing this to 

padding: 0 5%;

just as it is on your container class. See if that does the trick. :-)

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Okey thanks, i tried text-align too and it worked!