Captain Diddler Captain Diddler - 3 months ago 13
CSS Question

Group of figures centered inside of a div

I am trying to get a group of figure tags centered inside of a div tag. I set up a fiddle to show what I am experience. I'm going to have like 20+ of these and it does not look great with one side's margin bigger than the other. Everything I have looked up to this shows to have the child as display:inline-block and the parent as text-align: center, but this is not working for me, so they aren't in the fiddle.

https://jsfiddle.net/8ut3ngpz/

HTML:

<div class="thumbnaildiv">

<figure class="thumbnailfig">
<img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
<figcaption class="caption">Red Square</figcaption>
</figure>

<figure class="thumbnailfig">
<img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
<figcaption class="caption">Red Square</figcaption>
</figure>

<figure class="thumbnailfig">
<img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
<figcaption class="caption">Red Square</figcaption>
</figure>

<figure class="thumbnailfig">
<img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
<figcaption class="caption">Red Square</figcaption>
</figure>

<figure class="thumbnailfig">
<img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
<figcaption class="caption">Red Square</figcaption>
</figure>
</div>


CSS:

.thumbnailfig {
border: 1px solid #3D75A7;
max-width: 22.6%;
float: left;
margin: 1%;
}

.thumbnail {
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
}

.caption {
text-align: center;
font-size: 100%;
color: #ffffff;
}


Thanks in advance

Answer

You can use flexbox to solve this. In your example you have to add the .thumbnaildiv.

The Code (https://jsfiddle.net/8ut3ngpz/4/):

.thumbnaildiv {
  display:flex;
  flex-direction:row;
  justify-content:center;
  flex-wrap:wrap;
}
.thumbnailfig {
  border: 1px solid #3D75A7;
  max-width: 22.6%;
  margin: 1%;
}
.thumbnail {
  max-width: 90%;
  display: block;
  margin: 5% auto;
}
.caption {
  text-align:center;
  font-size:100%;
  color:#fff;
}
<div class="thumbnaildiv">
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
</div>