Now the problem is that this group of divs is in a table cell. This is fine and everything but I want all of the divs to be centered inside of that cell. I have tried everything but they just stick to the left.
Here is the table row (I am using PHPTAL as my templating engine)
Code: Select all
<tr>
<td style="margin-left: auto; margin-right: auto; text-align: center;">
<div class="whole">
<div class="box" tal:repeat="product content">
<a tal:attributes="href product/href"><img width="100" height="100" tal:attributes="src product/img_src" /></a>
<br />
<span class="productname" tal:content="product/name"></span>
<br />
<span class="productnumber" tal:content="product/code"></span>
<br />
<br />
<span class="productprice" tal:content="product/price"></span>
<br />
<a class="bodylinks_productcatalog" tal:attributes="href product/href">View Details</a>
</div>
</div>
</td>
</tr>
Code: Select all
.box img
{
border: none;
}
.box
{
display: block;
width: 123px;
float: left;
height: 260px;
text-align: left;
}
.whole
{
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
If anyone can help me get those products centered that would be freaking awesome.