顯示照片垂直對齊

Question

我試圖顯示動態照片（從後端文件）和環路it.So遠，我能夠顯示其垂直使用CSS

vertical-align: middle; 

但是，一旦我爲每個圖像添加的照片，名字，位置弄亂

with <span class="span_pics">project.name</span> 

without <span class="span_pics">project.name</span> 

的Html

<img src="http://localhost:8082/uploads/documents/default-project.jpg" id="img-responsive"> 
<span class="span_pics">project.name</span> 

CSS

img#img-responsive{ 
     height: 225px; 
     width: 225px; 
     vertical-align: middle; 

    } 
    .span_pics{ 
     margin: 2px; 
    } 

如何添加圖像下方居中的文本，而不會影響其當前位置？

Answer 1

您需要將所有內容都包裹在div中，然後根據需要對齊圖片和標題。我已經把樣品給你看：

https://jsfiddle.net/max234435/ua3cy4h6/1/

我創建了一個<div class='picture'></div>，把你的代碼的其餘部分在那裏你會看到的。

我希望多數民衆贊成你所尋找的，除非我誤解你的問題。