Nathan Nathan - 4 months ago 14
HTML Question

Aligning images with captions side by side

So I've spent the last hour or so trying to figure out how to put captioned images next to each other. Most solutions/questions other people have don't work when I try to add text below it using figcaption or something of that sort.

I want the text to be underneath the images and move with the images but for some reason it moves the other image to another layer when I add text. Any help would be greatly appreciated. Thank you.

(This is only a small portion of it because there's a lot of other stuff not related to this issue in that style)



.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

This method uses HTML 5 figure and figcaption elements, and CSS 3 flexbox.

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

figure {
    text-align: center;
}
<div id="images">
    <figure>
        <img class="gunimage" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
        <figcaption>this is text</figcaption>
    </figure>
    <figure>
        <img class="gunimage" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
        <figcaption>this is also text</figcaption>
    </figure>
</div>

NOTE: Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes, use Autoprefixer. More details in this answer.