—»     —»   Вертикальное центрирование с использованием CSS
  Раздел: CSS/Style Sheets   Комментариев: 1  

Вертикальное центрирование с использованием CSS



Существует несколько вариантов вертикального центрирования объектов при помощи CSS, но иногда бывает сложно выбрать правильный вариант. Я расскажу вам про самые лучшие варианты и про то, как создать небольшой центрированный веб-сайт.
Не так уж и просто реализовать вертикальное центрирование с помощью CSS. Существуют некоторые варианты, которые могут не работать в некоторых браузерах. Давайте проведем обзор 5 различных способов выполнения вертикального центрирования объектов, на максимально профессиональном и детальном уровне.

Метод первый

Данный метод подразумевает обозначение некоторых div - как таблицы. Поэтому мы можем выставить центрирование в атрибуте вертикального выравнивания (vertical-align) самой таблицы (что с разными элементами работает по-разному).
<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

Плюсы
→ Содержание блока может иметь динамическую высоту (необязательно указывать в CSS)
→ Содержание не обрезается, если в ячейке недостаточно пространства.

Минусы
→ Не будет работать в Internet Explorer (даже в 8 бета-версии)
→ Путаница в тэгах (что не так уж плохо, но это сугубо личный вопрос)

Метод второй

Данный метод будет использовать абсолютное позиционирование (position:absolute) div, где указатель вершины будет равен 50%, а верхнее допустимое отклонение будет отрицательным на половину высоты содержимого. Это означает то, что высота объекта должна иметь фиксированное число, которое будет указано в CSS.

Так как высота будет фиксированной, вам, вероятно, захочется указать автоматическое переполнение (overflow:auto) для содержимого div`а. Если содержимого окажется чересчур много, то появится скроллинг, вместо того, чтобы содержимое выходило за пределы div`а.
<div id="content">
    Content Here        
</div>

#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* отрицательная полувысота */}

Плюсы
→ Будет работать во всех браузерах
→ Не нужно будет создавать путаницы в тэгах

Минусы
→ При недостатке пространства содержимое пропадет. Все равно, что если div находится в теле (body) кода страницы, а пользователь уменьшает окно браузера. Скроллинг не появится.

Метод третий

Применяя этот метод, мы вставим div поверх блока содержания. Для этого мы укажем высоту в 50%, и допустимое отклонение нижней части будет равным вычитанию высоты содержимого (margin-bottom:-contentheight). Тогда содержимое будет отображено сверху, и оканчиваться будет в середине.
<div id="floater">
<div id="content">
    Content here
</div>
</div>

#floater    {float:left; height:50%; margin-bottom:-120px;}
#content    {clear:both; height:240px; position:relative;}

Плюсы
→ Будет работать во всех браузерах
→ При недостатке пространства (т.е. при уменьшении окна браузера), содержимое не будет обрезано - появится скроллинг.

Минусы
→ Можно переживать только о том, что данный метод потребует пустой дополнительный элемент (что не так уж плохо, но это сугубо личный вопрос).

Метод четвертый

Данный метод использует абсолютное позиционирование (position:absolute); div с фиксированной высотой и шириной. Затем div`у будет задано растягиваться с верха донизу (top:0; bottom:0), но это невозможно, так как он имеет фиксированную высоту. Следовательно, выставляем автоматическое допустимое отклонение (margin:auto), что распределит содержимое в центре. Это очень схоже с тем, когда допустимое отклонение выставляется на 0 автоматически (margin:0 auto) для блока содержимого, центрированного по горизонтали.
<div id="content">
    Content here
</div>

#content {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%;}

Плюсы
→ Очень легко реализовать

Минусы
→ Не будет работать в Internet Explorer (но работает с 8 бета-версии)
→ При недостатке пространства, содержимое будет обрезано и не появится скроллинг.

Метод пятый

Такой метод разместит по центру только одну отдельную линию текста. Просто укажите высоту строки (line-height) для высоты объекта и текст будет расположен ровно в центре.
<div id="content">
    Content here
</div>

#content {height:100px; line-height:100px;}

Плюсы
→ Работает во всех браузерах
→ При недостатке пространства не обрезает содержимое

Минусы
→ Работает только с текстом (невозможно с блочными элементами)
→ Неаккуратно обрывается, если использовать более одной строки (как при переносе строки)

Такой метод очень пригоден для небольших элементов, например, если центрировать текст внутри кнопки или поле для одиночной строки текста.

Так какой же метод выбрать?
Мой любимый вариант под номером 3 – использование плавающего содержимого. Этот вариант не имеет каких-либо значительных недостатков. Потому что данный вариант дает сразу оба преимущества: вы можете расположить другие элементы поверх содержимого, и при уменьшении окна, центрированное содержимое не будет заслонять остальные элементы.
<div id="top">
    <h1>Title</h1>
</div>
<div id="floater"></div>
<div id="content">
    Content Here        
</div>

#floater    {float:left; height:50%; margin-bottom:-120px;}
#top        {float:right; width:100%; text-align:center;}
#content    {clear:both; height:240px; position:relative;}

Теперь вы знаете, как с этим обращаться. Давайте приступим к созданию небольшого, но интересного веб-сайта. По окончанию работы, ваш проект будет выглядеть примерно так:
Вертикальное центрирование с использованием CSS

Шаг 1

Неплохо было бы начать с семантической разметки. Вот примерная структура нашей страницы:
#floater
#centred
#side
#logo
#nav
#content
#bottom

Далее используемый xhtml-код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A Centred Company</title>
    <link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>

<body>
    <div id="floater"></div>
    <div id="centered">

        <div id="side">
            <div id="logo"><strong><span>A</span> Company</strong></div>
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>

        <div id="content">

            <h1>Page Title</h1>

            <p>
            Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.
            Energistically simplify impactful niche markets via enabled imperatives.
            Holisticly predominate premium innovation after compelling scenarios.
            Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products.
            Distinctively syndicate standards compliant schemas before robust vortals.
            Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
            </p>

            <h2>Heading 2</h2>

            <p>
            Efficiently embrace customized web-readiness rather than customer directed processes.
            Assertively grow cross-platform imperatives vis-a-vis proactive technologies.
            Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.
            Conveniently streamline competitive strategic theme areas with focused e-markets.
            Phosfluorescently syndicate world-class communities vis-a-vis value-added markets.
            Appropriately reinvent holistic services before robust e-services.
            </p>

        </div>

    </div>

    <div id="bottom">
        <p>
            Copyright notice goes here
        </p>
    </div>
</body>
</html>


Шаг 2

Теперь немного поработаем над каскадными таблицами стилей (CSS) вне нашей страницы. Поместите данный код в текстовый файл и дайте ему название styles.css, к нему будет обращаться наша страница, посредством специальной строки в HTML-коде.
html, body {
    margin:0; padding:0;
    height:100%;
}

body {
    background:url('page_bg.jpg') 50% 50% no-repeat #FC3;
    font-family:Georgia, Times, serifs;
}

#floater {
    position:relative; float:left;
    height:50%;    margin-bottom:-200px;
    width:1px;
}

#centered {
    position:relative; clear:left;
    height:400px; width:80%; max-width:800px; min-width:400px;
    margin:0 auto;
    background:#fff;
    border:4px solid #666;
}

#bottom {
    position:absolute;
    bottom:0; right:0;
}

#nav {
    position:absolute; left:0; top:0; bottom:0; right:70%;
    padding:20px; margin:10px;
}

#content {
    position:absolute; left:30%; right:0; top:0; bottom:0;
    overflow:auto; height:340px;
    padding:20px; margin:10px;
}

Перед тем, как мы определим наше содержимое центрированным по вертикали, тело (body) в коде страницы должно быть растянуто на 100% по высоте. Потому как, это указание высоты находится внутри заполнения и допустимого отклонения, которым мы дали нулевое значение, что означает, что скроллинг не должен будет появиться.
Указателем допустимого отклонения нижней части плавающего объекта "margin-bottom" должна быть половина высоты содержимого, что составляет -200px, если высота содержимого 400px.

У вас должно получиться что-то вроде этого:
Вертикальное центрирование с использованием CSS

Ширина «центрированного» (#centered) элемента равна 80%. Это для того, чтобы ваш сайт был маленьким для небольших дисплеев, и большим для больших дисплеев (на моём сравнительно большом мониторе множество стареньких сайтов выглядят маленькими блоками в левом верхнем углу и это немного раздражает). Это более известно, как – плавающая разметка. Так же указывается минимальная и максимальная ширина (min-width/max-width) для того, чтобы сайт не становился слишком большим или слишком маленьким. Хотя, Internet Explorer не поддерживает данные атрибуты. Очевидно, что вместо них, вам следовало бы выбрать фиксированную ширину.

Поскольку ширина «центрированного» (#centered) элемента имеет относительное позиционирование (position:relative), мы сможем использовать абсолютное позиционирование внутри него, для расположения элементов. Для содержимого (#content) был использован атрибут автоматического переполнения (overflow:auto), поэтому будет появляться скроллинг, если содержимое элемента не будет умещаться в него. Internet Explorer не будет воспринимать атрибут overflow:auto до тех пор, пока мы не укажем высоту (не только позиции нижней части и вершины, и не в процентном эквиваленте), поэтому мы сделаем так, как требуется.

Шаг 3

Последнее, что нам осталось сделать, это добавить немного стиля, чтобы наша страница выглядела немного приятнее. Давайте начнем с меню.
#nav ul {
    list-style:none;
    padding:0; margin:20px 0 0 0; text-indent:0;
}

#nav li {
    padding:0; margin:3px;
}

#nav li a {
    display:block; background-color:#e8e8e8;
    padding:7px; margin:0;
    text-decoration:none; color:#000;
    border-bottom:1px solid #bbb;
    text-align:right;
}

#nav li a::after {
    content:'»'; color:#aaa; font-weight:bold;
    display:inline; float:right;
    margin:0 2px 0 5px;
}

#nav li a:hover, #nav li a:focus {
    background:#f8f8f8;
    border-bottom-color:#777;
}

#nav li a:hover::after {
    margin:0 0 0 7px; color:#f93;
}

#nav li a:active {
    padding:8px 7px 6px 7px;
}

При переделке обычного списка в меню, сначала следует убрать точечные отметки, используя атрибут list-style:none, а также убрать все допустимые отступы и заполнения ячеек. Если вы хотите использовать в меню отступы или дополнительное заполнения ячейки, убедитесь в том, что вы точно указали то, что вам нужно. Не следует оставлять это по умолчанию браузеров, так как значения разных браузеров могут отличаться друг от друга.

Следующая вещь, которую не стоит упускать из виду, это указание отображения ссылок как блочный элемент. Таким образом, они занимают всю линию полностью и дают вам намного больше контроля. Если вы хотите сделать ваше меню горизонтальным, то лучше всего было бы сделать его плавающим.

Еще одна интересная вещь заключается в использовании атрибутов «:before» и «:after». Этот псевдо-элемент CSS даёт вам возможность включить некоторое содержимое в ссылки. Это отличный способ для того, чтобы разместить небольшие иконки рядом с ссылками (очень часто на сайтах используют стрелочки в конце каждой ссылки). Однако это не будет отображаться в сборках Internet Explorer до 8 версии.
Вертикальное центрирование с использованием CSS

Шаг 4

И завершающим шагом будет внесение некоторых дополнений в CCS для того, чтобы наша страница приняла более приятный внешний вид.
#centered {
    -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
}

h1, h2, h3, h4, h5, h6 {
    font-family:Helvetica, Arial, sans-serif;
    font-weight:normal; color:#666;
}

h1 {
    color:#f93; border-bottom:1px solid #ddd;
    letter-spacing:-0.05em; font-weight:bold;
    margin-top:0; padding-top:0;
}


#bottom {
    padding:10px;
    font-size:0.7em;
    color:#f03;
}


#logo {
    font-size:2em; text-align:center;
    color:#999;
}

#logo strong {
    font-weight:normal;
}

#logo span {
    display:block;
    font-size:4em; line-height:0.7em;
    color:#666;
}

p, h2, h3 {
    line-height:1.6em;
}

a {
    color:#f03;
}

Небольшое замечание по поводу закругленных углов центрированного содержимого. В CSS3 должен быть атрибут «border-radius», с помощью которого можно указать радиус закругления углов. Это не будет реализовано в основных браузерах до тех пор, пока вы не используете приставки –moz или –webkit (для Mozilla Firefox или Safari/Webkit)
Вертикальное центрирование с использованием CSS

Полезные заметки
Как вы уже догадались, Internet Explorer – это единственный браузер, который обременяет вас различными проблемами:
* У плавающего элемента должна быть указана ширина, или вы ничего не добьетесь в любой версии этого браузера.
* 6-я версия этого браузера оставляет слишком много свободного пространства вокруг нашего меню, что искажает его.

Автор статьи © Douglas Heriot
Русский перевод © CoolWebmasters.Com 2009
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 19959   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 мая 2010 @ 22:46
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Опа =) То что "Доктор прописал"....
Как раз с кроссбраузерностью.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031