Positioning text under an image using echo - php

Question

I am using php to loop through and display all images from a directory. This works, however I want to add the image name underneath each of the images. I am struggling to get the text to center underneath it, as it seems to just place it next to it and appears to be in its own column separate to the image.
How do I go about fixing this? From research I've done the general solution seems to be placing them in a div together, I haven't done much php before but am I able to just stick the two echo statements inside of a div tag?
<div id="contentClothing">
<?php
function hoodie() {
$dir = 'images/clothing/hoodies/small/';
$files = scandir($dir);
$images = array();
foreach($files as $file) {
if(fnmatch('*.png',$file)) {
$images[] = $file;
}
if(fnmatch('*.jpg',$file)) {
$images[] = $file;
}
}
foreach($images as $image) {
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<span>'.$image.'</span>';
}
}
?>
</div>
Here is the css
#contentClothing {
padding-bottom: 5%; /* Height of the footer element */
margin-left: 15%;
}
span {
text-align: center;
}
This is how it looks http://puu.sh/m8Zh0/6b0da6ec03.png

Answer 1

Instead of <span>, use <p> tag. Wrap the whole image and text inside <div> tag and apply your styles to it.
// your code
foreach($images as $image){
echo '<div style="text-align:center; float:left; clear:right;">';
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<p>'.$image.'</p>';
echo '</div>';
}
// your code