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!
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
Amanda Bater
7,686 PointsTrying 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:
4 Answers
Bob McCarty
Courses Plus Student 16,618 PointsAmanda,
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
Treehouse Moderator 145,854 PointsHey 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.
Amanda Bater
7,686 PointsThank you these both worked!
Stephan Olsen
6,650 PointsYou could add this to the gallery wrapper:
align-items: center;