I have been working on displaying dynamic photos from a backend file and looping through them. I have successfully displayed the images vertically using CSS.
vertical-align: middle;
However, when I tried to add a photo name for each image, the positioning got messed up.
https://i.stack.imgur.com/wa0vc.png
with <span class="span_pics">project.name</span>
https://i.stack.imgur.com/VXXRT.png
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;
}
My question is, how can I add centered text below the image without affecting its current position?