I have created a table using div elements that contain images as cell data. When an image is missing, I would like to center the remaining images in the row like this:
With all images present:
xxxxx
xxxxx
Missing images (2 in the second row):
xxxxx
xxx
Currently, the images align to the left like this:
xxxxx
xxx
This is the CSS for the table:
.table
{
margin-top:5px;
margin-left:15px;
margin-right:15px;
display: table;
width:auto;
border-spacing:0px;
}
.row
{
display:table-row;
width:auto;
margin-left:auto;
margin-right:auto;
}
.cell
{
float:left;
display:table-column;
width:auto;
}
I attempted to use auto margins for left and right for the row, but it did not work. Do you have any suggestions?
Edit
<div class="table">
<div class="row">
#if ($has1)
<div class="cell"><a href="#1"><img src="1.jpg" width="138"/></a></div>
#end
#if ($has2)
<div class="cell"><a href="2"><img src="2.jpg" width="138"/></a></div>
#end
#if ($has3)
<div class="cell"><a href="#3"><img src="3.jpg" width="138"/></a></div>
#end
</div>
<div class="row">
#if ($has4)
<div class="cell"><a href="#4"><img src="4.jpg" width="138"/></a></div>
#end
#if ($has5)
<div class="cell"><a href="5"><img src="5.jpg" width="138"/></a></div>
#end
#if ($has6)
<div class="cell"><a href="#6"><img src="6.jpg" width="138"/></a></div>
#end
</div>
</div>