Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
CSS и Верстка /

Методы вертикального центрирования с помощью CSS. Общее описание задачи

  • Четверг, 29 сентября 2012, 07:54 |
  • Автор: falkovsky |
  • Просмотров: 1684 |
  • Комментарии: 0 |
  • В закладки:
В этом уроке мы разберем 6 различных вариантов, с помощью которых можно осуществить вертикальное центрирование посредством CSS.

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

Осуществление вертикального центрирования
Для решения задачи по горизонтальному центрированию в CSS, нужно запомнить две аксиомы:
1. «Если центрируемый элемент строчный, необходимо использовать свойство, отвечающее за выравнивание относительно родительского элемента.»
2. «Если центрируемый элемент блочный, необходимо задать ему ширину. Установка левого и правого полей также должна быть автоматическая.

Большинство программистов используют свойство под названием text-align, при помощи которого можно обратиться к свойству vertical-align и осуществить центрирование по вертикали. Многие, при использовании табличных шаблонов, прибегают к атрибуту valign и, используя его им кажется, что vertical-align – правильный путь к решению задачи. Но это не совсем так.

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

Содержимое ячейки таблицы, в отличие от строки текста, где выравнивание осуществляется по высоте, выравнивается по величине, которая вычисляется заданным алгоритмом. Vertical-align не способно действовать в блочных элементах (параграфы внутри элемента div). Значение этого свойства действует лишь по отношению к родительскому строчному элементу.
Может возникнуть вопрос: «Как же осуществить центрирование, если не с помощью vertical-align?»
Ответы в следующих уроках.

Методы вертикального центрирования с помощью CSS. Метод line-height
Методы вертикального центрирования с помощью CSS. Метод таблиц CSS
Методы вертикального центрирования с помощью CSS. Метод абсолютного позиционирования и отрицательных полей

Спонсором статьи является магазин Мерси.ру и марка Goon - goon подгузники, влажные салфетки и другая продукция для Вашего малыша, качество из Японии.
  • Тэги публикации
Добавить комментарий