divの内側に配置された図のグループ

Question

divタグの内側にある図形タグのグループを取得しようとしています。私は私が経験していることを示すためにフィドルを設定しました。私はこれらの20以上のようなものを持っているし、片側のマージンが他のものよりも大きく見えない。私がこれまで見てきたことはすべて、子供をディスプレイとして表示することを示しています：インラインブロックとテキストの整列：親としての親が、これは私のために働いていないので、彼らはフィドルにはありません。

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; 
} 

おかげ

Answer 1

あなたがこの問題を解決するためにフレキシボックスを使用することができます。あなたの例では、.thumbnaildivを追加する必要があります。

コード（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>