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

CSS

Andrew Miller
Andrew Miller
14,295 Points
Posted by Andrew Miller
Andrew Miller
14,295 Points

Flexbox centering issue

Hi, I can’t seem to get flexbox to center an image gallery within my div. I think it has to do with me nesting my ul items, but I can’t seem to target the issue. I am trying to accomplish the following:  Use flexbox to build a responsive image gallery  Each image needs to be a link to another image  I need to keep an equal space between each element My issue is:  Unable to center the image gallery within the div. I am at work now trying to figure out a solution and recreated a quick code pen. Below is the code and link to code pen.

http://codepen.io/anon/pen/vGjwxp?editors=1100

html:

<body> <div class="wrap"> <ul> <li> <a href="http://lorempixel.com/image_output/abstract-q-c-640-480-5.jpg"><img src="http://youthvoices.net/sites/default/files/image/129678/dec/1600dog_11019_1.jpg"></a> </li> <li> <a href="http://lorempixel.com/image_output/abstract-q-c-640-480-5.jpg"><img src="http://youthvoices.net/sites/default/files/image/129678/dec/1600dog_11019_1.jpg"></a> </li> <li> <a href="http://lorempixel.com/image_output/abstract-q-c-640-480-5.jpg"><img src="http://youthvoices.net/sites/default/files/image/129678/dec/1600dog_11019_1.jpg"></a> </li> <li> <a href="http://lorempixel.com/image_output/abstract-q-c-640-480-5.jpg"><img src="http://youthvoices.net/sites/default/files/image/129678/dec/1600dog_11019_1.jpg"></a> </li> <li> <a href="http://lorempixel.com/image_output/abstract-q-c-640-480-5.jpg"><img src="http://youthvoices.net/sites/default/files/image/129678/dec/1600dog_11019_1.jpg"></a> </li> <li> <a href="http://lorempixel.com/image_output/abstract-q-c-640-480-5.jpg"><img src="http://youthvoices.net/sites/default/files/image/129678/dec/1600dog_11019_1.jpg"></a> </li> </ul> </div> </body>

CSS:

.wrap { background-color: blue; width: 60%; overflow: hidden; }

.wrap ul { display: flex; list-style-type: none; flex-wrap: wrap; justify-content: center;

} .wrap li{ margin: auto; }

.wrap img { width: 200px;

}

1 Answer

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

I believe that the issue it that the UL element has a padding left. Make the padding for this element equal. i.e - 

.wrap ul {
    padding: 10px;
}

I solved this by using chrome developer tools' select tool. I solve all css problems ∞ faster like this. Let me know if I've misunderstood the question :-)