View Single Post
Old 12-16-2011, 04:13 AM   #10
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,146
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.
Jellby is offline   Reply With Quote