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