How do I center align table and it's contents

Hi Guys,

How do I center align table and it's contents. I have tried millions of things mentioned with no luck. Have a look at the link below:

http://simplecloudsync.com/


Thanks.

To center an element with known width, use inline styling:
margin: 0 auto;
for entire element (table in this case)

And if it goest to images, set their float to none with use of inline css.

I am not too sure where to make the changes. Here is the code for the article, I have removed the unnecessary text.

Code: Select all

<table border="0" align="center">
<tbody>
<tr>
<td><img src="images/frontpage/Cloud.png" alt="Cloud" /></td>
</tr>
<tr>
<td><img src="images/frontpage/Arrows.gif" alt="Arrows" /></td>
</tr>
<tr>
<td><img src="images/frontpage/Platforms.png" alt="Platforms" /></td>
</tr>
</tbody>
</table>

I have managed to center the table using, but I am having no luck with the table data.

Code: Select all

<table style="margin: 0 auto;" border="0">
<tbody>
<tr>
<td><img src="images/frontpage/Cloud.png" alt="Cloud" /></td>
</tr>
<tr>
<td><img align="middle" src="images/frontpage/Arrows.gif" alt="Arrows" /></td>
</tr>
<tr>
<td><img src="images/frontpage/Platforms.png" alt="Platforms" /></td>
</tr>
</tbody>
</table>

Code: Select all

<td style="text-align: center;"><img src="images/frontpage/Platforms.png" alt="Platforms" style="float:none;" /></td>


Its just a sample that should work.

That still doesn't work. I have now put that page on http://simplecloudsync.com/index.php/user-guide.

For the image that is aligned I had to create images big as the table with white space on the sides to make it have the appearance to be center aligned.

I can't do this for all the images, so if you could please resolve this for me please. I can email you login details if that will help.

Thanks in advance

It is because You still havent applied styling to table td elements and images inside.
IS it inside of a custom HTML module?

This is a normal article and here is the latest code I am using

Code: Select all

<table style="margin: 0 auto;" border="0">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="middle"><img src="images/frontpage/Cloud.png" alt="Cloud" /></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="middle"><img src="images/frontpage/Arrows.gif" alt="Arrows" /></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="middle"><img style="float: none;" src="images/Platforms.png" alt="Platforms"/></td>
</tr>
</tbody>
</table>

Just as a side note text aligns perfectly

Please post an url to exact location of this table.

http://simplecloudsync.com/index.php/user-guide

You have text-align center on td elements but You havent cleared floats on images.