Horizontally centering a DIV (2)

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

lister - 22 May 2007 18:27 GMT

I am trying to center a DIV horizonally, but I want the DIV fluid so
that it is just wide enough to encompass its contents.

I've tried margin:auto with no joy :(

I've set up a demo here:
http://www.thebunnyshed.co.uk/centertest.htm

ps. google screwed up my first post somehow.

Reply to this Message

biff - 22 May 2007 19:13 GMT

> I am trying to center a DIV horizonally, but I want the DIV fluid so
> that it is just wide enough to encompass its contents.
[quoted text clipped - 5 lines]
>
> ps. google screwed up my first post somehow.

You have left-margin:auto and right-margin:auto instead of margin-left:
auto and margin-right:auto ... you also need to set a width or the div
you are using for a container will take up the width of the entire outer
container....this worked for me:

<div style=" width:30em; margin-left:auto; margin-right:auto;
background-color:yellow; ">

Signature

biff

Reply to this Message

Gérard Talbot - 23 May 2007 20:05 GMT

biff wrote :

>> I am trying to center a DIV horizonally, but I want the DIV fluid so
>> that it is just wide enough to encompass its contents.
[quoted text clipped - 7 lines]
>
> you also need to set a width

The OP wants the div to stretch laterally, to expand horizontally to
fit/meet the width of its inline content ("just wide enough to encompass
its contents"). So, inline-block has to be a serious option here.

"inline-block
This value causes an element to generate a block box, which itself
is flowed as a single inline box, similar to a replaced element. The
inside of an inline-block is formatted as a block box, and the element
itself is formatted as an inline replaced element."
http://www.w3.org/TR/CSS21/visuren.html#propdef-display

or the div

> you are using for a container will take up the width of the entire outer
> container....

I believe his best chance is to use

div {display: inline-block; display: -moz-inline-block; margin-left:
auto; margin-right: auto;}

Not tested.

Gérard

Signature

Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages

Reply to this Message

Ben C - 23 May 2007 21:31 GMT

> biff wrote :
>>> I am trying to center a DIV horizonally, but I want the DIV fluid so
[quoted text clipped - 28 lines]
> div {display: inline-block; display: -moz-inline-block; margin-left:
> auto; margin-right: auto;}

Inline-block is the best way to do this, or would be if it were
supported by more browsers. But the way to centre it is not with auto
margins, but with text-align: center on the container.

See CSS 2.1 10.3.9-- auto left and right margins on inline blocks are
treated as zero. You only get that centering behaviour with block boxes.

Inline blocks are like inlines from the point of view of their
container, but like blocks from the point of view of their descendents.

So you center them like inlines, with text-align: center on their
container, rather than like blocks, which you centre with auto margins.

e.g.

body { text-align: center; }
div
{
display: inline-block;
display: -moz-inline-box; /* seems to work here */
border: 2px solid green;
}

<body>
<div>hello</div>
</body>

works in Opera.

The problem with inline-block is that IE (I heard) doesn't do the one
feature you need here, which is shrink-to-fit width. I don't know about
-moz-inline-box (it's -moz-inline-box, not -moz-inline-block) but it
seems to work OK in this example.

Reply to this Message

Gérard Talbot - 24 May 2007 15:36 GMT

Ben C wrote :

>> div {display: inline-block; display: -moz-inline-block; margin-left:
>> auto; margin-right: auto;}
>
> Inline-block is the best way to do this, or would be if it were
> supported by more browsers. But the way to centre it is not with auto
> margins, but with text-align: center on the container.

You're right.

> See CSS 2.1 10.3.9-- auto left and right margins on inline blocks are
> treated as zero. You only get that centering behaviour with block boxes.
>
> Inline blocks are like inlines from the point of view of their
> container, but like blocks from the point of view of their descendents.

Correct!

> So you center them like inlines, with text-align: center on their
> container, rather than like blocks, which you centre with auto margins.
[quoted text clipped - 18 lines]
> feature you need here, which is shrink-to-fit width. I don't know about
> -moz-inline-box (it's -moz-inline-box, not -moz-inline-block)

Yes again! Great post from you, Ben :)

> but it
> seems to work OK in this example.

Gérard

Signature

Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

Horizontally centering a DIV (2)