1

My table in my portfolio module isn't centering properly. In chrome it is a bit too much to the left when in firefox it's a bit too much to the right. Any ideas? Here is my html code for the 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>

Any help would be great.

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

  • Did you check/reset explicitly your paddings and Margins on the container element? – Khaarkh Feb 28 '15 at 10:44
1

There might be some styling in your template CSS file that is overriding the styling for the table.

By default, the following would work:

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

Of course you should assign a class or ID to your table and target that instead.

Or you can wrap you table in a div like so:

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

   </table>
</div>

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.