Centering Divs
Posted: Wed Apr 11, 2007 2:15 pm
Ok I have these divs that automatically go 4 in a row and breaks to the next line every 4. It is quite nice since I don't have to do a bunch of PHP hacks to make sure that a table is properly created, instead I just do a div and css does the magic for me!
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)
here is the relevant css:
and here is a link to the site in action: http://206.67.234.141/catalog/categories.php?fk_entry=5
If anyone can help me get those products centered that would be freaking awesome.
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.