Выравнивание в div по вертикали



выравнивание в div по вертикали

Вертикальное выравнивание блока div

Март 12th, DenWeb

Приветствую вас, уважаемые читатели блога DenWeb.Ru. В прошлой статье я писал о выравнивании страницы по центру. Там речь шла о том, как выравнивать блоки по горизонтали. Сегодня же я хочу рассказать о вертикальном выравнивании блока div. Рассмотрим два случая. В первом блок у нас имеет фиксированную ширину, а во втором он резиновый.

Вертикальное выравнивание блока div с фиксированными размерами.

Сначала мы обнуляем внешние и внутренние отступы и фиксируем высоту и ширину body и html. Затем для наглядности даем фон блоку centered. так же определяем ему ширину и высоту (600px на 400px). Задаем position:absolute и сдвигаем левый верхний угол блока на 50% вниз и на 50% вправо. Далее важное свойство — отрицательный отступ сверху, равный половине высоты блока и слева, равный половине ширины блока.

Вертикальное выравнивание резинового блока div.

Но как обычно проблемы возникают с браузером IE, который не умеет работать со свойством  display: table-cell. Именно для него используются условные комментарии   !--[if gte IE 6] . ![endif]-- . благодаря чему для IE версии 6 и позднее задаются свои стили для блока #centered.

Выравнивание блока div по вертикали и горизонтали по центру абсолютным позиционированием.

Если с выравниванием блоков div по горизонтали ситуация более менее ясная, то с выравниванием по вертикали, как правило, возникают трудности. Здесь не все так просто и добавлением лишь одного стиля CSS, блок по вертикали не выравняешь. Нужно использовать комбинацию стилей CSS.

Давайте сейчас ее и рассмотрим.

Сегодня я хочу рассказать об одном методе такого выравнивания, который я чаще всего использую на практике.

Итак, предположим, что у нас есть блок div с id #container, который является контейнером. По центру этого блока нужно расположить вложенный блок с id #inner:

Эти блоки имеют  ширину, высоту и цвет фона, которые задаются стилями CSS:

В браузере это выглядит сейчас следующим образом:

Задача в том, чтобы выровнять вложенный блок по центру блока контейнера.

Сделать это можно отредактировав стили CSS следующим образом:

Стили, которые были добавлены, выделены красным цветом. Это и есть та минимальная комбинация стилей CSS, которая заставит блок выравняться по центру.

Теперь блок будет отображаться по вертикали и горизонтали и по центру

Вот живой пример:

Если в качестве блока контейнера вы хотите использовать элемент body, то к стилям CSS нужно добавить следующее:

Надеюсь эти стили помогут вам решить проблему с вертикальным выравниванием блоков div по центру. Успехов!

Эта статья лишь часть курса #8220 Базовые приемы верстки веб-страниц#8221 . Это небольшой курс на 3 дня, который может значительно помочь вам в понимании технологии верстки сайтов..

6 методов вертикального центрирования с помощью CSS .

Центрирование элементов по вертикали с помощью CSS является задачей, которая представляет определенную трудность для разработчиков. Однако имеется несколько методов ее решения, которые достаточно просты. В данном уроке представлено 6 вариантов вертикального центрирования содержания.

Начнем с общего описания задачи.

Задача вертикального центрирования

Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный - задаем ему ширину и автоматическую установку левого и правого полей.

Большинство людей, используя свойство text-align. обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign. который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

  • В строке текста выравнивание производится по отношению к высоте строки.
  • В ячейке таблицы используется выравнивание по отношению к величине, вычисляемой специальным алгоритмом (обычно получается высота строки).

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

Метод line-height

Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать - это задать высоту строки больше, чем размер шрифта.

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

Центрирование изображения с помощью line-height

Источники: http://denweb.ru/verstka/vertikalnoe-vyravnivanie-bloka-div.html, http://webgyry.info/vertical-align-css-center-div, http://ruseller.com/lessons.php?id=1248






Комментариев пока нет!

Поделитесь своим мнением

Сумма: код подтверждения