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

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

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

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

Добавлено: natali2306 | 10.07.2011
Просмотров: 8626
Слов: 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/ (Платный профессиональный хостинг) — и информацию об авторе.
Смотрите также

О Интернет, О Сайты
Повсеместное распространение интернета привело к тому, что всю необходимую информацию люди черпают из сети. Это не могло не сказаться на деятельности различных компаний. Сегодня всё большее количество организаций стремится занять свое место во всемирной паутине. Конечно, в первую очередь, речь идет о сайтах, которые просто необходимо иметь каждой уважающей себя компании.

Как в WordPress настроить капчу на комментарии и на регистрацию
Лично я после установки WordPress столкнулся со следующей проблемой. Только сайт более или менее стал появляться в сети, на нем стали происходить регистрации. Ну я обрадовался, ого сколько новых пользователей!!!