CODEWITHSUNDEEP
csslayouthtmldynamic
Extelliqent
Extelliqent

Reputation: 1858

Dynamically Centering a Div

I went to MSDN and Google Coding, and they both give the same example. They say you can center a div like this, but it doesn't work. Anybody knows why? I also would like to know the best way to center a div. I tried to do margin: 0 auto; it didn't work.

Upvotes: 3

Views: 6465

Answers (7)

animuson
animuson

Reputation: 54729

I see everyone basically posting the same thing, but they are all making up rules that it must be within a containing division (fyi, <body> works perfectly fine as a 'container', it doesn't have to be a division) or must have a set width. Obviously, if you don't set a width, then the margin will have no effect because it will expand to the full width (thus no margin area).

Without you posting the actual HTML and CSS that you're using, we really can't help you at all, because we have no idea what's going on. By standards, margin: 0 auto should work, period. Like stated above, even if you don't specify the width, the 'auto' is still applied and is merely calculated as 0 as the division expands to the entire width and thus there is no margin to fill.

The only thing that comes to mind is that you are removing the block-level styling. Perhaps you are defining it as display: inline? Inline elements cannot have margins and would pay attention to the text-align property of the parent element instead. Also, if you are floating the division in any way, you obviously can't then say center it, because the point of floating is to push it to the left or right (not the center). We could continue to speculate, but really you should improve your question. Another note to add: you cannot use margin: 0 auto with fixed position elements.

Upvotes: 2

Sukima
Sukima

Reputation: 10074

What browser are you using? Do you have any example code. Perhaps a gist.github.com or jsfiddle.net.

If I infer what you want you need a few things.

  1. A containing DIV
  2. CSS width defined for child DIV
  3. CSS margin: 0 auto; for child DIV

The following example code is from: http://jsfiddle.net/sukima/5RQpw

HTML

<div id="parent">
    <!-- Must have a container div -->
    <div id="child">
        This is a test
    </div>
</div>

CSS

#parent {
    background-color: green;
    /* Center's text not div. Can be here or in child. */
    /* text-align: center; */
}
#child {
    background-color: red;
    width: 80px; /* Required. Develop your own calculation. */
    margin: 0 auto; /* Centers the div */
}

Upvotes: 2

Rodolfo Neuber
Rodolfo Neuber

Reputation: 3451

You require IE8 and above (I tried this on 9). IE complains about running active x controls before allowing you to run the web page.

<html>
  <head>
    <style>
      #oDiv
      {
        background-color: #CFCFCF;
        position: absolute;
        left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
        top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2);
      }
    </style>
  </head>
  <body>
    <div id="oDiv">Example DIV</div>
  </body>
</html>

The problem, of course, is that this is not compatible with all browsers. Centering a div vertically and horizontally strictly using CSS is more complicated but can be done. (It helps to use &nbsp; in the right places).

Upvotes: 0

Korvin Szanto
Korvin Szanto

Reputation: 4501

The div must be given an defined width in order for the margin trick to work: link

<div style='width:800px;margin:0 auto;'>Div Middle</div>

Upvotes: 2

CharithJ
CharithJ

Reputation: 47530

Try below.

#content
{    
    width: 740px;
    clear: both; 
    padding: 0; 
    margin: 0 auto;
}

Upvotes: 0

Nathan Arthur
Nathan Arthur

Reputation: 9096

If you don't know what size your box will be, you can use shrink wrapping techniques to allow you to still use margin:0 auto. (In the tutorial I linked to, they show just this very thing done with both display:inline and display:table.)

Edit: My bad. They only used margin:0 auto in their demonstration of display:table shrink wrapping.

Upvotes: 0

lsl
lsl

Reputation: 4419

margin: 0; /* reset */
margin-left: auto;
margin-right: auto;
text-align: center; /* For IE */

You neet to text-align: left for the inner parts after.

Upvotes: 0

Related Questions