Aligning images with captions side by side

Question

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>

Wrap your image and p inside another div to always keep them together. Building it this way creates unnecessary complexity and will create a lot of headache with responsiveness. — Yasin Yaqoobi, Jul 21 '16 at 02:22

score 1 · Accepted Answer · edited May 23 '17 at 12:08

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

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.

For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. — Michael Benjamin, Dec 23 '16 at 18:28

score 0 · Answer 2 · answered Jul 21 '16 at 02:47

Here is a solution using floats

.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>

Aligning images with captions side by side

2 Answers2