How to achieve table's centering capabilities without tables

Question

For me, one of the most useful features of tables is that their width adjust to its content.

You can very easily do things like:

<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>

If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.

You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.

So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?

Answer 1

Use this CSS

#content {
  position: absolute;
  width: 150px;
  margin-left: -75px;
  left: 50%;
  border: 1px solid #000;
  text-align: center;
  padding: 20px;
}

and this html <div id="content"> some text here </div>

Answer 2

If your intend is to display just some text at the middle of the page, you can use something like this:

<div style="text-align:center;">
    <div style="background:red;display:inline;">
        Hello World!
    </div>
</div>

The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.

Note this is limited to single line text only (like "some text here").

Answer 3

Quoting CSS: The Definitive Guide by Eric Meyer

If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:

p {width: 100px; margin-left: auto; margin-right: auto;}

Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)

In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.

However,

One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.

Answer 4

The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:

<div id="for-ie">
<div id="el">whatup son</div>
</div>

<style>
#el { 
display:table;
margin:0 auto;
}

/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el { 
zoom:1;
display:inline;
}
</style>

Demo

Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/

I'll lengthen it when I'm not sleepy.

Answer 5

Good golly, miss Molly! These answers are really overcomplicated.

CSS:

div.centered {
 width:100%;
 margin:0 auto;
 text-align:center;
}

div.centered span {
 padding:20px;
 border:1px solid #000;
}

And then use this in your body:

<div class="centered"><span>Hello world!</span></div>