frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

flexで簡単!画像を中央揃えにして横並びにする方法(キャプションあり)

スポンサードリンク


スポンサードリンク


画像を中央揃えにして横並びにする方法

<ul class="img-col2">
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
</ul>
.img-col2 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 35px 0 -20px -20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.img-col2 figcaption {
  margin-top: 5px;
  text-align: center;
}
.img-col2 figure > img {
    width: 100%;
}

.img-col2 > li {
    width: calc(50% - 20px);
    margin: 0 0 20px 20px;
}

.img-col2 > li:nth-child(2n + 1) figure {
    display: table;
    margin: 0 0 0 auto;
}

.img-col2 > li:nth-child(2n) figure {
    display: table;
    margin: 0 auto 0 0;
}
.img-col2._left {
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.img-col2._right {
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.img-col2._left > li, .img-col1-01._col2._right > li {
    width: auto;
}


原理としては、display:flexで横並びにしそれぞれをwidth:50%にしたあと左の要素にmargin-left:auto、右の要素にmargin-right:autoにして中央揃えにしています。


See the Pen GMmZWL by funclur (@funclur) on CodePen.


画像を左揃えor右揃えにして横並びにする方法

先ほどのコードに._left._rightを付与することで実現できます。

左揃え

<ul class="img-col2 _left">

右揃え

<ul class="img-col2 _right">