centering div within a div

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

bruce barker

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)
 
S

Steve Richter

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
 
S

Steve Richter

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
 
B

Brandon Gano

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

using CSS to center text 4
CSS problem in Firefox 4
Style Sheet not getting applied to content page 8
Rollover in 2nd column 1
Browser Div Centering Problem 6
Style sheet question 2
How will the Footer div stick to bottom of screen? 2
Basic understanding about the div tag 1

Top