Выравнивание Блока По Центру
|
Добавлено: natali2306 | 10.07.2011 |
Практически всегда при верстке бывает нужно сделать так, чтобы страница сайта, в том случае, когда ее ширина будет меньше разрешения экрана, выравнивалась по центру. Как же это реализовать?
Выравнить страницу по ширине браузера дольно просто. Для этого используем данный код.
Мы делаем блок 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/ (Платный профессиональный хостинг) — и информацию об авторе.Смотрите также
Универсальный Веб Дизайн, Угождающий Всем Вашим Посетителям
Всемирная паутина - чрезвычайно уникальное место, которое позволяет всем иметь доступ к той же самой информации от на всем свете. Это действительно - способность, никогда испытываемая прежде человечеством.
Разработка Сайтов
Когда становится вопрос разработка сайтов, то чаще всего основным критерием является не только качество, но и цена. Согласитесь, что предложение создать сайт за 10 долларов заманчиво, хотя и настораживает.