4

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?

5 Answers 5

1

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.

5
  • What's the point of display:table, triggering hasLayout and display:inline? Jul 9, 2010 at 1:02
  • table shrinkwraps the element for modern browsers. the other two are just for IE. Jul 9, 2010 at 1:24
  • There's also a way to center floats which are shrinkwrapped, without specifying widths if the IE workaround isn't ideal. Jul 9, 2010 at 1:39
  • This solution is the only one working so far. The part </el> caused one of my eyebrows to raise though.
    – GetFree
    Jul 12, 2010 at 0:25
  • oops, typo. fixed. I doubt there's any other cross-browser way without relying on js/table elements. Jul 12, 2010 at 0:32
1

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.

2
  • Yes, text-align centers the text within the block but does not center the block within its container.
    – Stephen P
    Jul 9, 2010 at 0:11
  • You reminded me that this is not the case for IE<6. Not that anybody is still using those. However, it should be mentioned for completeness sake. Jul 9, 2010 at 0:40
1

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").

11
  • "So, the question: How can you center a block element and ..." Jul 8, 2010 at 23:41
  • "... and make that element to adjust its width to its content in a cross-browser manner". What's wrong? In the sample code I provided, the width will be adjusted to its content (contrary to the solution you provided), and it is obviously a cross-browser solution (IE6 does not agree with me?). Jul 9, 2010 at 0:04
  • Ah yes, maybe you're right and he meant that. But for me, "make that element to adjust its width to its content" doesn't mean align text to the center of element. Aligning text never changes the width of the containing element. Jul 9, 2010 at 0:26
  • Not sure if my answer was clear. In my case, the width of a span is equal to the width of "Hello World!" text, and the span element is aligned to the center. It's nothing to do about the parent <div/>. So in my case, "element" is span, and "content" is innerHTML of span. Jul 9, 2010 at 0:45
  • But what element had its width adjusted? The span will still have the same width. Jul 9, 2010 at 0:51
0

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>

0
0

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>
2
  • It doesn't work in IE6. Borders on inline elements like span are not handled properly.
    – GetFree
    Jul 11, 2010 at 23:57
  • width:100% doesn't cause the block level to shrinkwrap. My solution is pretty succinct minus the IE fix. Jul 12, 2010 at 0:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.