Css center align div: CSS Layout — Horizontal & Vertical Align

css — Как сделать выравнивание по центру div в HTML

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 197 тысяч раз

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

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

Я пробовал:

 style='text-align:center';
стиль = 'слева: 50%';
 

Я даже использую центральный тег

 

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

  • HTML
  • CSS

5

 

  <голова>
    Центр
  
  <тело>

    <дел>
Этот DIV расположен по центру

Проверено и работает в IE, Firefox, Chrome, Safari и Opera. Я не тестировал IE6. Внешнее выравнивание текста необходимо для IE. Другие браузеры (и IE9?) будут работать, если вы зададите для полей DIV (слева и справа) значение auto. Маржа «0 auto» является сокращением для поля «0 auto 0 auto» (вверху справа внизу слева).

Примечание: текст также центрируется внутри внутреннего DIV, если вы хотите, чтобы он оставался слева, просто укажите text-align: left; для внутреннего DIV.

Изменить: IE 6, 7, 8 и 9работа в стандартном режиме будет работать с полями, установленными на автоматический режим.

10

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

text-align делает то же самое.

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

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

 width:500px; // это может быть любой модуль, который вы хотите, вам просто нужно определить его
поле слева: авто;
поле справа: авто;
 

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

ОБНОВЛЕНИЕ

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

 поле:0 авто;
 

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

6

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

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

 
blblablbalba

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

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

 
blblablbalba

для обеих техник необходимо обязательно задать ширину.

0

как насчет чего-то в этом роде