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