Как сделать выравнивание центра div в HTML

Возможный дубликат:
Как центрировать div в div?

Один простой способ сделать объект, центрированный в HTML, использует align='center', но он не работает для div.

Я пробовал:

style='text-align:center';
style='left:50%';

Я даже верю, что тег центра

<center>

Но я не могу сделать мой целевой div центром.

Ответ 1

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>

Ответ 2

Я думаю, что align="center" выравнивает содержимое, поэтому, если вы хотите использовать этот метод, вам нужно будет использовать его в div 'wraper' - div, который просто обертывает остальные.

text-align делает подобное.

left:50% игнорируется, если вы не установите позицию div как нечто относительное или абсолютное.

Общепринятыми методами являются следующие свойства

width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;

Поля, автоматически указывающие, что они растут/сжимаются, чтобы соответствовать окну браузера (или родительскому div)

UPDATE

Благодаря Meo для этого, если вы захотите, вы можете сэкономить время и использовать короткую руку для поля.

margin:0 auto;

это определяет верхнюю и нижнюю как 0 (так как это нулевое значение не имеет значения об отсутствии единиц), а левая и правая определяются как "авто". Тогда вы можете, если вы не вернетесь, верните верхний край как и с любыми другими правилами CSS.

Ответ 3

Это зависит от того, находится ли ваш div в положении: абсолютный/фиксированный или относительный/статический

для позиции: абсолютная и фиксированная

<div style="position: aboluste; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>

трюк здесь состоит в том, чтобы иметь отрицательный запас половины с объектом

для позиции: относительная и статическая

<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>

для обоих методов необходимо установить ширину

Ответ 4

как насчет чего-то в этом направлении

<style type="text/css">
  #container {
    margin: 0 auto;
    text-align: center; /* for IE */
  }

  #yourdiv {
    width: 400px;
    border: 1px solid #000;
  }
</style>

....

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