垂直对齐显示照片

Question

我尝试显示动态照片（来自后端文件）并循环播放。到目前为止，我可以使用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>并将其余代码放在那里，如您所见。

除非我误解你的问题，否则我希望你能找到你想要的东西。