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

Amanda Bater
Amanda Bater
7,686 Points

Trying to centre thumbnail images

I'm building a responsive image gallery using flexbox, and have a load of thumbnails that I would like to be centred in the middle of the page in a column.

However, so far the images just sit on the left side of the page, despite that fact that I've tried to align the content to the centre. I've used the developer tools to try and find the problem, and it seems that there is a large amount of white space to the right side of the thumbnails. It doesn't seem to be margin or padding.

Where has this come from and how can I get rid of it so that my thumbnails sit in the middle of the page?

I've posted a snapshot of my code here:

https://w.trhou.se/aw4fvzm572

4 Answers

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points

Amanda,

The design contains three nested divs .container, .gallery, .thumb. The .thumb div contains the img. The .thumb div spans the entire length of .gallery. The img sets on the left margin of . gallery. You can set the text-align: attribute on .gallery to 'center'. This will center the images within the thumb div. Or, you can resize and center the .thumb div. Bob

.gallery{
   text-align: center;
}
Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points

Hey Amanda,

If you add margin: 0 auto; to the .gallery .thumb selector, the images will center.

There probably is a better way (or a way within Flexbox), but this does solve your issue for now.

:dizzy:

Amanda Bater
Amanda Bater
7,686 Points

Thank you these both worked!

Stephan Olsen
Stephan Olsen
6,650 Points

You could add this to the gallery wrapper:

align-items: center;