Centring shrink-to-fit boxes.

Using display: table - variable browser support

In nearly all modern browsers except currently used Internet Explorer versions, this should appear as 'centred boxes' (you may have to make your browser wider to see):

This is a centred shrink-to-fit div box.

This is a centred shrink-to-fit div box. Bigger with these words.

This is a centred shrink-to-fit div box. And yet bigger still with more words.

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 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-fit.

Fig 1. <div style="display:table; margin: auto; border: 1px solid #999; color: black; background: green;">This is a centred shrink-to-fit div box.</div>

Using tables

In all modern browsers, this should appear as centred boxes:

This is centred shrink-to-fit table.

This is a centred shrink-to-fit div box. Bigger with these words.

This is a centred shrink-to-fit div box. And yet bigger still with more words.

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-fit.

Fig 2. <table style="margin: auto; border: 1px solid; color: #000; background: #pink;"><tr><td>This is centred shrink-to-fit table.</td></tr></table>

A way to avoid tables for IE?

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 centring to display: block; and to give this no border but a background-color to match the page surround and to text-align: center. 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.

There is yet another known way to centre a block that might be of interest to some, using absolute positioning. Lets look at this next.

previous page | next page