画像を横並びに、文字は各画像の下に配置したい。

Question

お世話になります。

htmlに

        <div class="image-contents">
            <img src="image">
            <p>文字</p>
            <img src="image">
            <p>文字</p>
        </div>

cssに

.image-contents {
display: flex 
}

と入力すると画像と文字それぞれが横並びになってしまいます。

理想は画像と文字がワンセットで、横並びになるようにしたいです。
↓このような

拙い説明ですが、ご教授のほどよろしくお願い致します。

Answer 1

説明付き画像にはfigure/figcaptionをつかいます

• <figure>: キャプションが付けられる図要素 - HTML: HyperText Markup Language | MDN

<style>
.image-contents{
display:flex;
}
</style>

<div class="image-contents">
<figure>
<img src="image">
<figcaption>
<p>文字</p>
</figcaption>
</figure>
<figure>
<img src="image">
<figcaption>
<p>文字</p>
</figcaption>
</figure>
</div>

Comments

[zechi]

素早いお返事ありがとうございます！
さっそく試したところ、理想の形になりました(^_^)
<figure>タグ、初めて知りました。
また、質問した際はよろしくお願い致します。