Центрирование DIV с помощью IE

Я пытаюсь центрировать DIV, "margin:auto". Он отлично работает с Chrome и FF, но следующий код не центрирует DIV с IE:

CSS

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

HTML

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

Что я делаю неправильно?

Спасибо,

Joel

Изменить (полный код HTML/CSS):

<html>
<head>
<link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css'; return false;">
<style>

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

Ответ 1

Вставьте это вверху документа:

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

или для html5:

<!DOCTYPE html>

Ссылка на объявление типа документа

Ответ 2

Автоматическое центрирование полей

Проблема: при центрировании тегов div с помощью поля margin-left: auto; или margin-right: auto;, это не будет работать в Internet Explorer, если вы не добавите следующее в таблицу стилей для тела html:

html, body {
 text-align: center;
}

Не забудьте теперь добавить это в свои абзацы и заголовки, поскольку приведенная выше настройка теперь заставит их также центрировать.

p {text-align: left;}

Ответ 3

Попробуйте это;

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

Ответ 4

Вам нужно ссылаться на doctype, как указано в "2astalavista"

В противном случае

1.Center с использованием позиционирования и отрицательного поля, если это известная ширина

<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.Используйте внешнийконтейнер и центр выравнивания текста, чтобы центрировать элемент:

<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>

Ответ 5

Это работало для меня:

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

Ответ 6

Это поможет вам:

body {
    text-align: center;
}

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

Вы ничего не делаете, IE6 делает: он игнорирует "margin: auto;"

Ответ 7

Вы также должны добавить туда и сюда атрибуты справа и слева:

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