Centering DIV with IE
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>
加载中,请稍侯......
精彩评论