web-dev-qa-db-fra.com

La table n'est pas bien centrée dans le module

Ma table dans mon module portefeuille ne se centre pas correctement. Dans chrome c'est un peu trop à gauche, alors que dans Firefox c'est trop à droite. Des idées? Voici mon code html pour le portfolio.

<p style="text-align: center;"> </p>
<table style="height: 265px; margin-left: auto; margin-right: auto;" width="1013">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: center;">
<p><img src="images/quest_design_web_gallery_header.png" alt="" /></p>
<p> </p>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><a href="img/image-1.jpg" data-lightbox="web" data-title="This is first image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-2.jpg" data-lightbox="web" data-title="This is second image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-3.jpg" data-lightbox="web" data-title="This is third image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: left;">
<p> </p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="images/quest_design_design_gallery_header.png" alt="" /></p>
<p> </p>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><a href="img/image-1.jpg" data-lightbox="design" data-title="This is first image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-2.jpg" data-lightbox="web" data-title="This is second image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><a href="img/image-3.jpg" data-lightbox="web" data-title="This is third image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td>   </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: center;">
<p> </p>
<p><img src="images/quest_design_image_gallery_header.png" alt="" /></p>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><br /><a href="img/image-1.jpg" data-lightbox="image" data-title="This is first image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><br /><a href="img/image-2.jpg" data-lightbox="image" data-title="This is second image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td><br /><a href="img/image-3.jpg" data-lightbox="image" data-title="This is third image caption"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/thumbnail.png" alt="Thumbnail" border="0" /></a></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> </p>

Toute aide est la bienvenue.

http://www.webbmaster.com.au/web-programs/questdesign/index.php/folio

joomla-3.xjhtml
1
Kyle

Il se peut que votre fichier CSS de modèle contienne du style qui remplace le style du tableau.

Par défaut, ce qui suit fonctionnerait:

table {
    width: 500px;
    margin: 0 auto;
}

Bien sûr, vous devez attribuer une classe ou un ID à votre table et la cibler à la place.

Ou vous pouvez envelopper votre table dans un div comme ceci:

<div style="text-align:center">    
   <table style="display: inline-table;">  

   </table>
</div>
1
Lodder