centering div within a div

  • Thread starter Thread starter Steve Richter
  • Start date Start date
S

Steve Richter

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.

<div style="height:8em; margin:1em; border:dotted 1px orange;">

<div style="margin-top:1em;margin-bottom:1em;margin-left:auto;margin-
right:auto;
display:inline; background-color:LightBlue;">
abc efg
</div>
</div>

why would display:inline cause the margins of the div to be ignored?

thanks,


here is the complete html:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default7.aspx.cs" Inherits="Default7" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>

<div style="height:8em; margin:1em; border:dotted 1px orange;">

<div style="margin-top:1em;margin-bottom:1em;margin-left:auto;margin-
right:auto;
display:block; background-color:LightBlue;">
abc efg
</div>

</div>


</body>
</html>
 
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.

-- bruce (sqlwork.com)
 
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.
Click to expand...

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
 
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
 
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:

<html>
<head>
<style type="text/css">

#Container {
border:dotted 1px orange;
margin:1em;
padding:1em;
text-align:center;
width:100%;
}

#Container ul {
background-color:lightblue;
display:inline;
margin:0;
padding:0;
}

#Container li {
display:inline;
margin:0 1em;
}

</style>
</head>
<body>
<div id="Container">
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</div>
</body>
</html>
 
Back
Top