標題與圖像並排對齊

Question

因此，我花了最后一個小時左右的時間來弄清楚如何將帶字幕的圖像彼此相鄰放置。 當我嘗試使用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和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> 

注意： 除了IE 8和9之外 ，所有主流瀏覽器都支持Flexbox。 某些最新的瀏覽器版本（例如Safari 8和IE10）需要供應商前綴 。 要快速添加前綴，請使用Autoprefixer 。 此答案中有更多詳細信息。

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>