Aqui les copio el codigo index donde esta en enlace a la imagen grid_1 que es la que quiero centralizar. he tratado de todo para centralizarla y no he podido. espero que me puedan ayudar...
<table cellspacing="0" cellpadding="0">
{foreach item=grids from=$rows}
<tr>
{foreach item=grid from=$grids}
<td>
{if !$smarty.session.magnify}<map name="grid_{$grid->id}">{$grid->map()}</map>{/if}<div style="float: left"{if $smarty.session.magnify} onmouseover="zoom_on(event,{$grid->width|escape},{$grid->height|escape},'{$grid->url()|escape}');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"{/if}><img src="{$grid->url()|escape}" usemap="#grid_{$grid->id}" width="{$grid->width|escape}" height="{$grid->height|escape}" alt="" border="0" /></div><div style="clear: both"></div>
</td>
{/foreach}
</tr>
{/foreach}
</table>
Tambien les copio el codigo style.css
body {
margin: 0 auto;
background: #DDDDFF;
}
body, td, input, select {
font: normal 12px Arial,Helvetica,sans-serif; margin: 0 auto;
}
p, form {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h1 {
font-size: 22px;
}
h2 {
font-size: 16px;
}
div.toolbar {
background: #646464;
padding: 5px;
color: #FFFFFF;
width: 989px;
}
div#cabeza2 {
background-color:#c69e29;
height:20px;
width: 996px;
}
div.toolbar a {
color: #FFFFFF;
}
#language_selector {
font-size: 11px;
}
div.content {
padding: 5px;
color: #333333;
}
div.content a {
color: #333333;
}
div.content a:hover {
color: red;
}
.error, .notice {
color: red;
}
div.error {
padding: 5px;
border: 1px solid #666666;
background: white;
}
.boxed {
padding: 5px;
border: 1px solid;
margin-left: 2em;
margin-right: 2em;
}
.indent {
margin-left: 2em;
}
td.label {
text-align: right;
white-space: nowrap;
padding-right: 5px;
width: 1%;
}
table.grid {
border-collapse: collapse;
}
table.grid td, table.grid th {
padding: 5px 15px 5px 15px;
}
table.grid th {
background: #AAAAFF;
}
div.snippet {
white-space: nowrap;
}
div.snippet select {
font-size: 10px;
vertical-align: middle;
}
div.snippet input {
vertical-align: middle;
}
div.snippet textarea {
width: 100%;
}
input[type="radio"] {
vertical-align: bottom;
}
div.alert {
margin: 25px;
text-align: center;
padding: 10px;
background: white;
border: 2px solid red;
font-size: 12px;
font-weight: bold;
}
div.blog_article {
border-bottom: 1px dashed #AAAAAA;
}
p.blog_article_title {
font-weight: bold;
font-size: 16px;
}
p.blog_article_date {
font-style: italic;
color: #888888;
}
div.blog_comment {
border-bottom: 1px dashed #AAAAAA;
}
textarea.code {
font: normal 12px Arial,Helvetica,sans-serif;
width: 450px;
background-color: #eeeeee;
border-color: #cccccc;
border-style: inset;
margin-top: 5px;
}
p.blog_comment_date {
font-style: italic;
color: #888888;
}
.tabberlive .tabbertabhide {
display: none;
}
.tabber {
display: none;
}
.tabberlive {
margin-top:1em;
}
ul.tabbernav
{
margin: 0;
padding: 3px 0;
border-bottom: 1px solid #AAA;
/* font: bold 12px Verdana, sans-serif */;
font-weight: bold;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #AAA;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #AAA;
}
ul.tabbernav li.tabberactive a
{
background-color: #fff;
border-bottom: 1px solid #fff;
}
ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
border-bottom: 1px solid white;
}
.tabberlive .tabbertab {
padding: 5px;
border: 1px solid #aaa;
border-top: 0;
}
.tabberlive .tabbertab h2 {
display: none;
}
.tabberlive .tabbertab h3 {
display: none;
}
.tabberlive#tab2 .tabbertab {
height: 200px;
overflow: auto;
}
.hidde {
display: none;
}
.popup {
padding: 5px;
}
#WzTtDiV {
background: #e6ecff;
}