Выравнивание блока HTML (вертикально и горизонтально)

Центровка элемента — одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы.

Горизонтальная центровка.

С центровкой текста все ясно:

HTML tag center

Раньше встречалось использование тега <center>, который является валидным только в transitional doctype. Считается, что его использование аналогично действию text-align: center. Однако это не так. Им можно центрировать не только текст, но и контейнер вроде div.

cn-center-tag

Здесь я отцентрировал по горизонтали с помощью <center> контейнер с фиксированной шириной. При этом, если убрать <center> и дописать в стили <body> прилегание текста по центру, то эффекта центровки контейнера мы не получим. Обратите внимание, что на рисунке не только сам контейнер центрован, но и текст в нем также центрован.

Код примера в HTML

Margin: auto;

Чтобы стилями добиться эффекта подобного <center>, можно добавить специфический margin. Тогда тег <center> можно убрать.

Центровка таблицей.

Кто любит табличную магию, те могут применять центровку таблицей. Результат аналогичен <center>.

Код HTML

Вертикальная центровка

Раз уж мы заговорили о настоящей табличной магии, то нет ничего сложного центровать контейнер в таблице по вертикали.

table-magic-vertical

В таблице из прошлого примера добавим центровку по вертикали (valign=center»). Табличку я подкрасил, чтобы визуализировать её границы.

HTML код для табличной центровки контейнера по вертикали.

Центровка с помощью CSS свойства vertical-align.

Vertical-align относиться к свойству прилегания строки, потому наш контейнер нужно сначала подготовить. Вместо дефолтного display: block нужно установить block-inline. Добавим внешний контейнер, который имитирует строку, где выравнивается наш тестовый блок.

vertical-align-sample

Вроде бы все есть, но почему то центровки по вертикали не происходит. Чудо не случилось :). Все потому, что middle должен вычисляться относительно других элементов строки, а их нет.

HTML код примера выше.

Чтобы пример заработал достаточно добавить в #line  неразрывного пробела — &nbsp;. Это также могут быть другие inline, block-inline контейнеры, вроде #sample.

vertical-align-sample-2elm

Теперь все получилось, как задумано. Контейнер #sample занял положение по центру строки.

Вот такая маленькая хитрость. :)

Написать комментарий

Мало букафф? Читайте есчо !

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-5c1914250c09f844549502/] Ключевым является значение auto для левого и правого отступов. ...

Читать

Центровка HTML с помощью абсолютного позиционирования

Октябрь 10, 2017 г.

Классическая задача о позиционировании контейнера относительно центра родительского блока. Я писал уже о некоторых простых способах установить контейнер ...

Читать

 

Комментарии к «Выравнивание блока HTML (вертикально и горизонтально)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: