キャプションを横に並べて画像を並べる

Question

だから私は最後の1時間かそこらの間にキャプション付き画像を並べる方法を見つけようとしました。 figcaptionやそのようなものを使って、その下にテキストを追加しようとすると、他の人のソリューションや質問のほとんどはうまくいきません。

テキストを画像の下に置き、画像とともに移動したいのですが、何らかの理由でテキストを追加すると別の画像を別の画層に移動します。どんな助けでも大歓迎です。ありがとうございました。

.gunimage { 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 15%; 
 
    padding-left: 20px; 
 
} 
 
#images { 
 
    text-align: center; 
 
}

<div id="images"> 
 
    <img class="gunimage" border="0" alt="idk" src="gg.png" /></a> 
 
    <p>this is text</p> 
 
    <img class="gunimage" border="0" alt="idk" src="gg2.png" /></a> 
 
    <p>this is also text</p> 
 
</div>

Answer 1

このメソッドは、HTML 5つのfigure and figcaption要素を使用しています（そのスタイルで、この問題に関連しない他の多くのものがありますので、これはそれのほんの一部です）、およびCSS 3 flexbox。

#images { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
figure { 
 
    text-align: center; 
 
}

<div id="images"> 
 
    <figure> 
 
     <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""> 
 
     <figcaption>this is text</figcaption> 
 
    </figure> 
 
    <figure> 
 
     <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""> 
 
     <figcaption>this is also text</figcaption> 
 
    </figure> 
 
</div>

注：フレキシボックスは、except IE 8 & 9は、すべての主要なブラウザでサポートされています。 Safari 8やIE10などの最近のブラウザのバージョンには、vendor prefixesが必要です。接頭辞を簡単に追加するには、Autoprefixerを使用してください。詳細はthis answerを参照してください。ここで

Answer 2

は山車

.gunimage { 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 15%; 
 
} 
 
.half { 
 
    width:50%; 
 
    float: left; 
 
} 
 
#images { 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div id="images"> 
 
    <div class="half"> 
 
    <img class="gunimage" border="0" alt="idk" src="gg.png"> 
 
    <p>this is text</p> 
 
    </div> 
 
    <div class="half"> 
 
    <img class="gunimage" border="0" alt="idk" src="gg2.png"> 
 
    <p>this is also text</p> 
 
    </div> 
 
</div>