Center DIV?

[Axel Dahmen]

Hi,

I've posted this question a few months ago but didn't get a truly satisfying
answer then. So I'd like to post my question again:

How can I center a DIV? The content in the DIV should be left-aligned, but
the DIV itself should be centered, like:

----------------------------------
| |
| =============== ==== |
| | Foo | |
| | Another foo | |
| | Still a foo-bar | |
| =============== ==== |
| |
| |
----------------------------------

There should be no fixed widths. The width of the DIV should be the width of
the content.

TIA,
Axel Dahmen

[Axel Dahmen]

> That wasn't part of the original question, you can't expect a correct

answer if you omit that. If you then start a new thread instead of
making this clear in the original thread, whilst complaining that your
earlier question wasn't answered properly you can expect the response
you got.
Here's a quote from that previous thread:

"And actually I'm not really satisfied with providing a fixed width. I'd
prefer to have the with of the div be the width required by the content. Is
there a solution without providing a width?"

That question (which was an immediate follow-up) remained unanswered...
The correct answer (a FAQ in this group btw) is that the proper method
to achieve what you want is to use an inline-block element, like so:

<div style="text-align:center">
<div style="display: inline-block;text-align:left">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>

This is currently supported by Opera (buggy), iCab and Safari, it can be
hacked to work in IE, but it's not supported in Gecko based browsers.

For a single instance of the inner box you could use a css table, but
this is not supported by IE at all.

Although it's probably possible to create something that works in all
modern browsers + IE, the solution would be so convoluted that you are
better of scrapping the idea, or use html tables.

That's exactly what I wanted to know. Thank you. :)

Axel

[Gus Richter]

Gus Richter wrote:

Axel Dahmen wrote:

<div style="display: table; width: 0%; margin-left: auto; margin-right:
auto; border: 2px solid black;">
blabla<br>
ölrkgölgkad<br>
blabla<br>
</div>

I think this is it! It seems a correct solution. I guess it's a bug
for IE
not using the correct layout if the "width: 0%" is missing. But as
width is
ignored for "display: table" according to
http://www.w3.org/TR/2003/WD-CSS21-2...o-table-layout,

it doesn't break the code anyway.

Thank you for helping me with this great idea! :)

Regards,
Axel

Works great for me except for one small item that has to be noted. On an
interword space a new line is generated, so &nbsp; must be used instead.

Add white-space:nowrap; instead and use the normal interword space.

--
Gus

[Axel Dahmen]

merci!