Dynamically Centering a Div_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-06 04:28 出处：网络

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 cente

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 d开发者_JAVA技巧o margin: 0 auto; it didn't work.

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>

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.

A containing DIV
CSS width defined for child DIV
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 */
}

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.

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.

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.

Try below.

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

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   in the right places).