In nearly all modern browsers except currently used Internet Explorer versions, this should appear as 'centered boxes':
In all modern browsers, this should appear as centered boxes:
| This is centred shrink-to-fit table. |
| This is a centred shrink-to-fit div box. But bigger in practice. |
| This is a centred shrink-to-fit div box. And yet bigger still in practice. |
| This is a centred shrink-to-fit box. And not a lot of material needs to go into it, especially not a lot of inline material like text, before the centring attribute become practically useless. Only gods have infinitely wide monitors. The only recourse to stop such expansion ruining the centred look is to choose a width and/or a max-width. But that is getting away from the concept of shrink to size. |
A way to avoid tables for IE, suggested by Bootnic in a thread called "CSS equivalent of single-cell table" at the newsgroup alt.html, is to make a conditional stylesheet instruction that only IE sees, to set the boxes that need centering to display: block; and to give this no border but a background-color to match the page surround and to text-align: centre. And then to wrap the content in a span, to display this as inline-box and give this a border and a background of your choosing to highlight the "shrunk-to-fit" box or its appearance.
This is limited in its application to centring inline text and pics. Whereas the above two methods are good for a greater variety of content
You can see a trial to follow this suggestion at:
centring 'shrink to fit' box for IE too without tables
The goal is to have one page that works in both IE and more compliant browsers. This does it with the severe limitation mentioned.