{{* ---A loop for each thumbnail---- *}}
<table width="100%">
	<tr>
		<td align="center" valign="top">
		{{section name=id loop=$image_name}}
		<div class="outer">
			<div class="middle">
				<div class="inner">
					<a href="javascript:image_details_popup('details.php?name={{$image_name[id]}}', 675, 450)"><img src="images/{{$username}}/-{{$image_name[id]}}.png" style="border:1px solid #000000 " /></a><br />
					<small>{{$image_name[id]}}<br />
					{{$time_uploaded[id]}}</small>
				</div>
			</div>
		</div>
		{{/section}}
		</td>
	</tr>
</table>

/* ~~~Start Vert Align of Div's~~~ */

.outer{
	float: left;
	width: 120px;
	height: 150px;
	overflow: hidden;
	position: relative;
	border: 1px dashed #d0dbe9;
	}
	
.outer[class]{
	display: table;
	position: static;
	}

.middle{
	position: absolute;
	top: 50%;
	} /* for explorer only*/
	
.middle[class]{
	display: table-cell;
	vertical-align: middle;
	position: static;
	}

.inner{
	position: relative;
	top: -50%
	} /* for explorer only */

.inner[class]{
	position: static;
	text-align: center;
	}

/* ~~~End Vert Align of Div's~~~ */