IPHosting (платный профессиональный хостинг)

Здравствуйте, Гость

Главная страница » Веб-дизайн, создание сайтов » Веб-дизайн » Выравнивание Блока По Центру

Выравнивание Блока По Центру

Добавлено: natali2306 | 10.07.2011
Просмотров: 8384
Слов: 269
Рейтинг: 0.50


Горизонтальное выравнивание блока

Практически всегда при верстке бывает нужно сделать так, чтобы страница сайта, в том случае, когда ее ширина будет меньше разрешения экрана, выравнивалась по центру. Как же это реализовать?
Выравнить страницу по ширине браузера дольно просто. Для этого используем данный код.

Мы делаем блок div с id wrapper с шириной например 800px, который будет оборачивать все содержимое страницы.

В самом начале обнуляем все отступы — * {margin: 0; padding: 0} . Для body задаем свойство text-align: center, чтобы выровнить его содержимое по центру. А для блока wrapper задаем свойство margin: 0 auto, которое и выравнивает его по центру окна браузера.

Таким способом можно выравнивать любой другой элемент.


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

Теперь о вертикальном выравнивании блока div. Разберем два случая. В первом блок у нас имеет фиксированную ширину, а во втором он резиновый.
Вертикальное выравнивание блока div с фиксированными размерами.

Если у блока фиксированная ширина, то здесь все просто. Используем следующий код.

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

Код здесь

Специально для тега html задаем display: table; показывающее, что элемент - это блочная таблица. Потом прописываем для body свойства, указывающие что элемент представляет собой ячейку таблицы с вертикальным выравниванием по-середине.

Как всегда проблемы возникают с браузером IE, который не может работать со свойством display: table-cell . Именно для него используются условные комментарии

Об авторе

http://denweb.ru/



Условия перепечатки

При репосте статьи "Выравнивание Блока По Центру", пожалуйста укажите источник - сайт http://www.iphosting.ru/ (Платный профессиональный хостинг) — и информацию об авторе.
Смотрите также

Графика На Сайте – Подводные Камни
Внешний вид сайта – несомненно важная составляющая при раскрутке и продвижении сайта. Главное при этом не переусердствовать с дизайном сайта.

Редизайн Сайта И Ребрендинг
Наличие бренда для вашего сайта - важный момент в формирование позитивного образа бизнеса. Бизнес работает на Вас во многих отношениях, что вы хотите быть уверены в будущей привлекательности бренда, что вы не должны нарушать дизайн бренд в новом дизайне сайта.