html - 显示照片垂直对齐

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>并将其余代码放入其中，如您所见。

我希望这就是你要找的，除非我误解了你的问题。