Centering DIV with IE_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-20 14:42 出处：网络

I am trying to center a DIV, with \"margin:auto\" . It works fine with Chrome and FF but the following code does not center the DIV with IE:

相关专题：css

I am trying to center a DIV, with "margin:auto" . It works fine with Chrome and FF but the following code does not center the DIV with IE:

CSS

#container {
 margin开发者_C百科:auto;
 width:950px;
 height:50px;
 background:#000;
}

HTML

<div id="container"></div>

What am I doing wrong?

Thanks,

Joel

Edit (full HTML/CSS code):

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>

#container {
 margin: 0 auto; 
 width:950px;
 height:50px;
 background:#000;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

Insert this at the top of the document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or for html5:

<!DOCTYPE html>

Reference for document type declaration

Margin Auto Centering

Problem: When centering div tags via either the margin-left: auto; or margin-right: auto; settings, this will not work in Internet explorer unless you add the following to your style sheet for the html body:

html, body {
 text-align: center;
}

Don't forget to now add this to your paragraphs and headings as the above setting will now cause these to also center.

p {text-align: left;}

Try this;

#container {
 margin:0 auto;
 width:950px;
 height:50px;
 background:#000;
}

You need to reference the doctype as mentioned by '2astalavista'

Otherwise

1.Center using positioning and negative margin if it is a known width

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>


#container {
position: relative;
left: 50%; 
margin: 0 0 0 -475px; /* negative margin of half the width */
width:950px;
height:50px;
background:#000;
}

</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

2.Use the outercontainer and text-align center to centre the element:

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
 <style>

#outerContainer{
text-align: center;
}

#container {
margin: 0 auto; 
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="outerContainer">
      <div id="container"></div>
</div>
</body>
</html>

This one worked for me:

#container {
   width: 80%; /* or the width of the object inside the container */
   margin-left: auto;
   margin-right: auto;
}

This should help you out:

body {
    text-align: center;
}

#container {
    text-align: left;
    margin:auto;
    width:950px;
    height:50px;
    background:#000;
}

You do nothing wrong, IE6 does: it ignores "margin: auto;"

You should put right & left attributes in there also:

#container
{
  right: 0px;
  left: 0px;
  margin: 0px auto;
  width: 950px;
}

This worked for me with regards with the IE centering bug:

<div style="margin-left: auto; margin-right: auto; width: 50%;">
      <div style="text-align: left; margin: 1em auto; width: 50%;">
       

          <form action="/action_page.php">
            First name:<br>
            <input type="text" name="firstname" value="Tom">
            <br>
            Last name:<br>
            <input type="text" name="lastname" value="Cruise">
            <br><br>
            <input type="submit" value="Submit">
          </form> 

      </div>
</div>