Выравнивание сайта по центру экрана

выравнивание сайта по центру экрана

В этой статье я вам покажу, как выровнять страницу сайта по центру окна браузера, под любое разрешение экрана. Этот метод можно использовать, если страница имеет фиксированную ширину и в дальнейшем, это ширина не будет меняться в зависимости от контента. Этот способ выравнивания рекомендуется использовать начинающим дизайнерам, но в большинство случаев он используется и на сайтах больших компаний, потому что еще много людей используют маленькие мониторы и множество сайтов сделаны под разрешение экрана 1024х768. Значит, этот метод подходит для дизайна с фиксированной шириной. Давайте посмотрим на код страницы:

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>Главная страница</title>
        <style type ="text/css">
            body{
                margin: 0px; /* Убираем внешние отступы */
                padding: 0px; /* Убираем внутренние отступы */
            }

            #wrapper{
                position: absolute; /* Относительное позиционирование */
                border: 1px solid #000; /* Внешнея граница вокруг блока div */
                width: 1000px; /* Ширина блока div */
                min-height: 950px; /* Минимальная высота блока */
                margin-left: -500px; /* Внешний левый отступ. Отрицательное значение означает, что блок выходит за левого края браузера на 500px */
                left: 50%; /* Позиционирование относительно левого края окна браузера */
                background-color: #7AB8E9; /* Цвет фона для блока */
            }
        </style>
    </head>
    <body>
        <div id="wrapper" >

        </div>
    </body>
</html>

У нас получилось страница, выровнена по центру окна браузера.

как выровнять сайт по центру

Разберем CSS код страницы

В первую очередь убрали внешние (margin) и внутренние(padding) отступы у блока body т.к. у каждого браузера изначально заданы разные значения этих свойств для блока body. Эти значения больше чем 0px, поэтому мы их убираем.

Создали блок div и задали ему идентификатор с именем wrapper. Этот блок и есть обертка для нашей страницы.

Для блока div задали абсолютное позиционирование на 50% относительно левого края окна браузера. Могли бы задать и фиксированное позиционирование (position:fixed;) она аналогична абсолютной позиционирований, но в данном случае не смогли бы прокручивать страницу вертикально, поэтому отказались от этого значения. Ширину страницы задали 1000px для того чтобы поместилась в разрешение экрана 1024. 24px оставили для полосы вертикальной прокрутки. В итоге страница вместе с полосой прокрутки занимает 1024px, что естественно подойдет для всех экранов, которые поддерживают это разрешение.

Задали отрицательное значение для внешнего отступа margin в размере -500px, это занимает половину из размера блока div. Это значение заставляет блока div двигаться в сторону левого края браузера, на расстояние 500px, половины из своей ширины. Смотрим, как это выглядит в браузере.

отрицательный отступ css

Для абсолютного позиционирования задали left:50%; что соответствует половину из ширины блока, для того что бы страница начала позиционирование с пол страницы. Это свойство вместе с отрицательным левым отступом, делают, что бы страница выравнивалась прямо по центру в любой разрешений экрана.

Если Вы не знакомы с отрицательными значениями свойства margin, то я вам рекомендую почитать статью Отрицательные значения внешних полей в CSS.

Вот, и все что я вам хотел рассказать о выравнивании страницы по центру окна браузера. Теперь вы знаете один из методов как решить данную проблему. Желаю вам больших успехов.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%