Как выровнять страницу в браузере
В этой статье я вам покажу, как выровнять страницу сайта по центру окна браузера, под любое разрешение экрана. Этот метод можно использовать, если страница имеет фиксированную ширину и в дальнейшем, это ширина не будет меняться в зависимости от контента. Этот способ выравнивания рекомендуется использовать начинающим дизайнерам, но в большинство случаев он используется и на сайтах больших компаний, потому что еще много людей используют маленькие мониторы и множество сайтов сделаны под разрешение экрана 1024х768. Значит, этот метод подходит для дизайна с фиксированной шириной. Давайте посмотрим на код страницы:
У нас получилось страница, выровнена по центру окна браузера.
Разберем CSS код страницы
В первую очередь убрали внешние (margin) и внутренние(padding) отступы у блока body т.к. у каждого браузера изначально заданы разные значения этих свойств для блока body. Эти значения больше чем 0px, поэтому мы их убираем.
Создали блок div и задали ему идентификатор с именем wrapper. Этот блок и есть обертка для нашей страницы.
Для блока div задали абсолютное позиционирование на 50% относительно левого края окна браузера. Могли бы задать и фиксированное позиционирование (position:fixed;) она аналогична абсолютной позиционирований, но в данном случае не смогли бы прокручивать страницу вертикально, поэтому отказались от этого значения. Ширину страницы задали 1000px для того чтобы поместилась в разрешение экрана 1024. 24px оставили для полосы вертикальной прокрутки. В итоге страница вместе с полосой прокрутки занимает 1024px, что естественно подойдет для всех экранов, которые поддерживают это разрешение.
Задали отрицательное значение для внешнего отступа margin в размере -500px, это занимает половину из размера блока div. Это значение заставляет блока div двигаться в сторону левого края браузера, на расстояние 500px, половины из своей ширины. Смотрим, как это выглядит в браузере.
Для абсолютного позиционирования задали left:50%; что соответствует половину из ширины блока, для того что бы страница начала позиционирование с пол страницы. Это свойство вместе с отрицательным левым отступом, делают, что бы страница выравнивалась прямо по центру в любой разрешений экрана.
Если Вы не знакомы с отрицательными значениями свойства margin, то я вам рекомендую почитать статью Отрицательные значения внешних полей в CSS.
Вот, и все что я вам хотел рассказать о выравнивании страницы по центру окна браузера. Теперь вы знаете один из методов как решить данную проблему. Желаю вам больших успехов.
Похожие статьи:
Видео:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Читайте также: