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 sakatagintoki
sakatagintoki
12,624 Points

Centering a UL within a Div?

Trying to center this unordered list of gallery style images within a containing div with the class "welcomegallery".

As you can see it sticks to the left of the div. I tried to setting the margin to margin: 0 auto. I tried removing the padding. The solution will probably be blindingly obvious to me within a few hours, but it's an easy best answer for whoever can look at my code and see what's wrong, I guess.

EDIT: Direct link so you can see the code more clearly: http://s11.postimg.org/54o3c8a77/centerul.png

Thx ~Jay

2 Answers

Gavin Ralston
Gavin Ralston
28,770 Points 
.welcomegallery ul li { float: left; 
...
}

Any chance that has something to do with the list items hanging around there?

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

I dt think so, cause there is the same thing in a course and it worked, the only difference, there wasnt with a "ul" inside, it was like :

.welcomegallery li {
         float: left;
         ....
}
sakatagintoki
sakatagintoki
12,624 Points

tips fedora

Nay Ayoub, Gavin was correct.

I think you're talking about the How to Make a Website Course that Nick Petit does at the beginning of the Web Design/Front End Web Development track. Using a float to display the images on one line works in that project because the UL isn't inside a containing Div with a background-color, like my ".welcomegallery".

I simply removed the float and set the .welcomegallery ul li {display: inline-block;} and it worked like a charm.

Gavin Ralston
Gavin Ralston
28,770 Points

Awesome. Glad I could help!

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

Ookey, I ve thought of that at first and then I recalled what nick did, but it was also in a container div ! anyway, thanks ;)