centering div within a div

Discussion in 'ASP .Net' started by Steve Richter, Jul 16, 2007.

  1. 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>
    Steve Richter, Jul 16, 2007
    #1
    1. Advertising

  2. Steve Richter

    bruce barker Guest

    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)




    Steve Richter wrote:
    > 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>
    >
    bruce barker, Jul 16, 2007
    #2
    1. Advertising

  3. 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
    Steve Richter, Jul 16, 2007
    #3
  4. 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
    Steve Richter, Jul 16, 2007
    #4
  5. Steve Richter

    Brandon Gano Guest

    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>


    "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

    >
    >
    Brandon Gano, Jul 17, 2007
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Graham

    Re: centering a div

    David Graham, Jul 6, 2003, in forum: HTML
    Replies:
    0
    Views:
    415
    David Graham
    Jul 6, 2003
  2. shank

    centering <div> in <TD>

    shank, Sep 30, 2003, in forum: HTML
    Replies:
    3
    Views:
    14,593
    Zibanani Jopi
    Jul 27, 2012
  3. King of Red Lions

    centering a div

    King of Red Lions, Jun 25, 2004, in forum: HTML
    Replies:
    1
    Views:
    384
  4. =?ISO-8859-1?Q?=22H=2E_M=E4ki=22?=

    Centering div

    =?ISO-8859-1?Q?=22H=2E_M=E4ki=22?=, Feb 16, 2006, in forum: HTML
    Replies:
    2
    Views:
    560
    cwdjrxyz
    Feb 17, 2006
  5. Replies:
    3
    Views:
    373
    dorayme
    Nov 16, 2007
Loading...

Share This Page