centering div within a div

in the following code I expect the inner div to be centered within the
outer div. problem is, it doesn't.

basically, the margin settings of the inner div are not recognized
when display:inline is used. When the inner div is display:block, the
top and bottom margins are recognized, but the div width is the width
of the containing div, so there is no centering.

Advertisements

when an element is inline and contains splittable content, it does not
have a margin, border or padding. you outer div as it has no width, will
always be the width of the inner div. it has no padding, so its no
bigger (margin and border are outside the div) then the contained div.

in block mode the inner div is centered, just the outer div is the same
size.

Advertisements

On Jul 16, 3:28 pm, bruce barker <> wrote:
> when an element is inline and contains splittable content, it does not
> have a margin, border or padding. you outer div as it has no width, will
> always be the width of the inner div. it has no padding, so its no
> bigger (margin and border are outside the div) then the contained div.

so unless I set a specific width of the inner div, I can't center it??

What I want to do is have the inner div contain a navigation menu.
Only the browser knows the width because it is the one that is
rendering the navigation menu contents.

basically margin: auto does not apply to display:inline because a
centered element has to be the only element on the line. inline, by
definition, means there will be more than one element on the line.

Seems kind of lame since why cant the browser calc the auto margin of
the multiple inline elements on the line as an even slice of the
available margin space?

-Steve

On Jul 16, 4:32 pm, Steve Richter <> wrote:
> On Jul 16, 3:28 pm, bruce barker <> wrote:
>
> > when an element is inline and contains splittable content, it does not
> > have a margin, border or padding. you outer div as it has no width, will
> > always be the width of the inner div. it has no padding, so its no
> > bigger (margin and border are outside the div) then the contained div.
>
> so unless I set a specific width of the inner div, I can't center it??
>
> What I want to do is have the inner div contain a navigation menu.
> Only the browser knows the width because it is the one that is
> rendering the navigation menu contents.
>
> <style type="text/css">
> li.navMenu { display: inline; margin-right:1em; list-style-
> type:none; text-decoration:underline;}
> </style>
>
> <div style="height:8em; margin:1em; border:dotted 1px orange;">
> <div style="margin-left:auto; margin-right:auto; background-
> color:LightSalmon; display:inline;">
> <ul style="background-color:LightBlue; display:inline; margin-left:
> 0;">
> <li class="navMenu">option 1</li>
> <li class="navMenu">option 2</li>
> <li class="navMenu">option 3</li>
> </ul>
> </div>
> </div>
>
> Is there a javascript event I can hook onto that would add up the
> widths of the elements in the inner div, then set its width so the
> whole thing can be centered?
>
> thanks,
>
> -Steve

IE used to honor margin for inline elements, but that isn't
standards-compliant behavior. One option is to ditch the inner div, make the
ul inline, and use text-align:center on the outer div. See below:

"Steve Richter" <> wrote in message
news:...
> basically margin: auto does not apply to display:inline because a
> centered element has to be the only element on the line. inline, by
> definition, means there will be more than one element on the line.
>
> Seems kind of lame since why cant the browser calc the auto margin of
> the multiple inline elements on the line as an even slice of the
> available margin space?
>
> -Steve
>
>
> On Jul 16, 4:32 pm, Steve Richter <> wrote:
>> On Jul 16, 3:28 pm, bruce barker <> wrote:
>>
>> > when an element is inline and contains splittable content, it does not
>> > have a margin, border or padding. you outer div as it has no width,
>> > will
>> > always be the width of the inner div. it has no padding, so its no
>> > bigger (margin and border are outside the div) then the contained div.
>>
>> so unless I set a specific width of the inner div, I can't center it??
>>
>> What I want to do is have the inner div contain a navigation menu.
>> Only the browser knows the width because it is the one that is
>> rendering the navigation menu contents.
>>
>> <style type="text/css">
>> li.navMenu { display: inline; margin-right:1em; list-style-
>> type:none; text-decoration:underline;}
>> </style>
>>
>> <div style="height:8em; margin:1em; border:dotted 1px orange;">
>> <div style="margin-left:auto; margin-right:auto; background-
>> color:LightSalmon; display:inline;">
>> <ul style="background-color:LightBlue; display:inline; margin-left:
>> 0;">
>> <li class="navMenu">option 1</li>
>> <li class="navMenu">option 2</li>
>> <li class="navMenu">option 3</li>
>> </ul>
>> </div>
>> </div>
>>
>> Is there a javascript event I can hook onto that would add up the
>> widths of the elements in the inner div, then set its width so the
>> whole thing can be centered?
>>
>> thanks,
>>
>> -Steve
>
>

Share This Page

Welcome to The Coding Forums!

Welcome to the Coding Forums, the place to chat about anything related to programming and coding languages.

Please join our friendly community by clicking the button below - it only takes a few seconds and is totally free. You'll be able to ask questions about coding or chat with the community and help others.
Sign up now!