For images, and for anything else, you have to use "text-align: center" in the containing element.
But tables are different, as they have no native width, but adapt their width to their contents... I believe tables do not obey text-align (but the text inside the table cells does). The way to center a table would be with "margin: 0 auto;", but since "auto" is not supported, the only way is assigning a fixed relative width to a table, and then dividing the rest between right and left margins:
table { /* 60%+20%+20% = 100% */
width: 60%;
margin-left: 20%;
margin-right: 20%;
}
Or, my preferred solution, just use "auto" and bear with the rendering being sub-optimal in ADE, at least it will be nicely coded and work properly in any reader with better support (present or future).
By the way, when you want a centered image, you'll often want something like:
<div class="illustration">
<img src="..." alt="" />
</div>
div.illustration {
margin: 1em 0;
text-align: center;
}
div.illustration img {
max-width: 100%;
max-height: 100%;
}
So having to use "text-align: center" is no real cluttering.
Last edited by Jellby; 12-16-2011 at 04:16 AM.
|