标题与图像并排对齐

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> 

Answer 1

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 .

Answer 2

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>