Absolute по центру css: Как выровнять css position absolute по центру
Выравнивание блока div со свойством position:absolute или fixed по центру.
Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.
Здесь есть несколько моментов, которые не совсем просто воспринимаются. На одном из них мне бы хотелось сегодня остановиться.
Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.
Для этого используется стандартная CSS конструкция margin:auto.
Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.
Т.е. в данном случае наш пример принимает следующий вид.
Есть еще более современное решение этой проблемы — использование flexbox.
Подробнее здесь.
<div> <div></div> </div>
position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга <body>
position:absolute; — собственно говоря, само абсолютное позиционирование.
После произведенной манипуляции margin:auto работать уже перестает.
Как быть? Как можно снова выровнять блок по центру?
Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.
<div> <div></div></div>
left:50%; — смещаем блок относительно родительского на 50% влево.
margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.
Если ширина блока задается в процентах, то решение может быть следующим:
<div> <div></div> </div>
Если по центру нужно выровнять строку с текстом:
<p>Строка текста</p>
Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.
Все, что было сказано выше про position:absolute аналогично можно применить и к блокам, которые имеют position: fixed.
Есть еще более современное решение этой проблемы — использование flexbox.
Подробнее здесь.
Абсолютное позиционирование в CSS: понять раз и навсегда
Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.
Введение в позиционирование
Когда вы устанавливаете position: absolute, на первый план выходит не сам элемент, а его родительский контейнер, ведь относительно него и осуществляется позиционирование в CSS. Сложность в том, что это не всегда непосредственный родитель элемента.
Рассмотрим код с четырьмя дивами, вложенными друг в друга по принципу матрешки.
<body> <div> <div> <div> <div></div> </div> </div> </div> </body>
box-1, box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.body {
display: flex;
}
.box-1,
.box-2,
.box-3 {
display: flex;
margin: auto;
}Все 4 элемента имеют позиционирование по умолчанию. На данный момент верстка выглядит следующим образом:
.box-4 без позиционированияОтносительно чего позиционируем?
Чтобы спозиционировать себя, элемент должен знать две вещи:
- какой родитель станет точкой отсчета;
- величину смещения относительно точки отсчета (сверху, снизу, справа или слева).
Если определить position: absolute для box-4, этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).
Теперь добавим свойства top: 0 и left: 0. Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3
box-2, ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (unset).Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):
Если установить position: relative для элемента box-1, точкой отсчета станет он:
Абсолютно позиционированный элемент располагается относительно ближайшего позиционированного предка.
Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.
Если установить position: relative также для box-2, то box-4 будет позиционироваться относительно него, ведь этот предок ближе.
Аналогично и для контейнера box-3:
А вот и наглядный красивый CSS-пример поиска позиционированного предка:
Еще больше полезных статей по CSS:
CSS: элемент в центре — dr.Brain
Эта статья будет полезна для тех, кто только начинает свой путь в веб-разработке. Выравнивание элемента по центру — достаточно распространенная задача, но каждый из нас все равно когда-то испытывал связанные с этим затруднения и искал оптимальные способы выравнивания по центру одного блока относительно другого c помощью Google или Stackoverflow. Несомненно, это простая задача. Однако, наличие большого количества элементов и стилей зачастую приводит к обидным ошибкам.
Ниже мы разберем несколько способов выравнивания блока по центру.
Text-align
Метод div.
Как это делается?
- вокруг элемента, который нужно выровнять по центру, создайте родительский блок (обычно он называется wrapper или container),
- задайте для этого (родительского) элемента CSS-свойство text-align: center,
- для выравниваемого элемента создайте свойство display: inline-block.
В примере для синего квадрата есть блок-обертка blue-square-container, для которого определено выравнивание текста по центру
Следует обратить внимание на то, что по умолчанию для свойства display div получает значение block и поэтому занимает всю доступную ширину 100% и не выравнивается по правилам строчных элементов.
В свою очередь для inline-block элемента:
- ширина определяется содержимым или установленным фиксированным значением,
- выравнивание относительно родительского блока происходит по правилам, установленным для строчных элементов.
Margin: auto
Другой распространенный способ центрирования блока по горизонтали связан с автовырвниванием левого и правого внешних отступов (например:
Мы просто применяем margin: 0 auto к желтому блоку, и это будет работать, если у выравниваемого элемента есть фиксированная ширина.
margin: 0 auto — короткая запись CSS-свойств, определяющая верхний и нижний внешние отступы равными 0, и автоматическое определение ширины для левого и правого внешних отступов.
Важно, чтобы для выравниваемого элемента была установлена фиксированная ширина (в нашем случае для желтого квадрата width: 100px), без нее браузер не сможет рассчитать значения правого и левого внешних отступов, чтобы установить элемент по центру.
Вместо 0 можно установить любые необходимые значения для верхнего и нижнего внешних отступов.
Еще один интересный прием — установить значение auto только для margin-left или только для margin-right, что позволит сместить элемент, соответственно, вправо или влево (попробуйте).
Абсолютное позиционирование
Элемент с абсолютным позиционированием можно разместить в любом месте страницы, но с одной особенностью.
Элемет с абсолютным позиционированием выпадает из потока страницы. То есть остальные элементы страницы ведут себя так, будто абсолютно позиционированного элемента вовсе не существует.
Почему это важно?
Потому, что при некорректном использовании данного свойства, можно спровоцировать наложение элементов.
Если мы хотим просто разместить блок по центру, как в двух предыдущих примерах, нужно выполнить три действия:
- установить элементу свойство position: absolute,
- применить свойство left: 50%,
- установить margin-left равным половине ширины элемента с отрицательным значением.
В данном случае, для этого примера создан зеленый квадрат с такими же размерами, как и в остальных случаях, то есть ширина равна 100px.
Свойства position: absolute и left: 50% указывают браузеру на необходимость сместить элемент на 50% влево. Но в этом случае на отметке 50% будет находиться левый край центрируемого элемента, а не его середина.
Наконец, для того, чтобы выровнять элемент по центру, мы смещаем его влево на половину ширины, за счет margin-left с отрицательным значением.
Следует помнить, что расчет положения элемента с абсолютным позиционированием осуществляется относительно любого из родительских элементов с установленным свойством “position: relative” или относительно страницы при их отсутствии.
Transform/translate
До сих пор мы изучали методы выравнивания элементов по горизонтали. Но что делать, если элемент должен находиться точно в центре страницы (как по горизонтали, так и по вертикали).
Проделаем это с красным квадратом из второго примера (смотри выше).
Хотя мы все еще применяем абсолютное позиционирование и margin-left: 50%, появляются и два новых CSS-свойства.
Устанавливая верхний внешний отступ равным 50%: margin-top: 50%, мы смещаем верхний край элемента к центру. Но, аналогично предыдующему примеру, в центре по вертикали оказывается верхний край элемента, а не его середина.
Вот почему нам нужно еще одно свойство, которое называется transform
С помощью transform можно делать разные крутые штуки, в том числе: смещение, ротацию, масштабирование. Но в данном случае нас интересует именно смещение (translate).
Создаем для центрируемого элемента свойство transform: translate(-50%, -50%), и…
Наш красный квадрат находится в центре как по горизонтали, так и по вертикали страницы.
Этот метод часто используется в адаптивной верстке и не требует определения фиксированных размеров элемента, как в примере с абсолютным позиционированием.
Flexbox
Flexbox — одна из популярных моделей позиционирования и выравнивания элементов на странице.
Если Вы не знакомы с flexbox, воспользуйтесь Flexbox Froggy — это увлекательный и веселый интерактивный способ изучения всех возможностей модели flexbox.
Для того, чтобы разместить элемент в центре (по горизонтали и вертикали) с помощью flexbox, нужно выполнить следующие действия:
- HTML, body и родительский контейнер должны иметь высоту 100%,
- для родителського контейнера нужно установить display: flex,
- так же для родительского контейнера нужно установить align-items: center,
- еще для родительского контейнера нужно установить justify-content: center.
Устанавливая display: flex, мы создаем flex-контейнер.
align-items: center определяет вертикальное выравнивание всех дочерних элементов по центру родительского.
justify-content: center по действию подобен предыдущему свойству, но работает в другом направлении — горизонтальном.
Этот метод хорош тем, что отлично подходит для адаптивной верстки и не требует вычисления внешних отступов.
Спасибо за внимание.
Перевод статьи Stephen Sun “How to center things with style in CSS “.
CSS: выравнивание по центру
CSS: выравнивание по центруЦентрирование
Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:
В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:
Центрирование строк текста
Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:
P { text-align: center }
h3 { text-align: center }которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:
Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.
Центрирование блока или изображения
Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P>Этот довольно ...Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.
Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG src="..." alt="...">Следующее изображение центрировано:
Вертикальное центрирование
CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы может быть выровнено по центру вертикально.
Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне браузера, потому что находится внутри блока, позиционированного абсолютно и по высоте окна.
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV>
<P>Этот маленький абзац...
</DIV>Этот маленький абзац центрирован вертикально.
Центрирование по вертикали в CSS уровня 3
Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:
Этот абзац выровнен вертикально по центру.
Для документа, который выглядит вот так:
<div class=container3> <p>Этот абзац… </div>
таблица стилей выглядит так:
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */Основные правила:
- Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
- Сам элемент сделайте абсолютно позиционированным (position: absolute).
- Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
- Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)
Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.
Этот абзац выровнен по центру вертикально.
таблица стилей выглядит следующим образом:
div.container5 {
height: 10em;
display: flex;
align-items: center }
div.container5 p {
margin: 0 }Вертикальное и горизонтальное центрирование в CSS уровня 3
Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.
Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.
Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:
<div class=container4> <p>Центр! </div>
В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:
div.container4 {
height: 10em;
position: relative }
div.container4 p {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.
Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:
с этой таблицей стилей:
div.container6 {
height: 10em;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.
Центрирование в области просмотра в CSS уровня 3
Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)
<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<h2>Красиво выровнен по центру</h2>
<p>Этот текстовый блок выровнен вертикально по центру.
<p>И горизонтально, если окно достаточно широкое.
</section>Вы можете увидеть результат в отдельном документе.
Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.
Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.
(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)
Навигация по сайту
position | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
- absolute
- Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
- fixed
- По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
- relative
- Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
- static
- Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src="images/girl.jpg" alt="Девочка" />
</div>
</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства position
Объектная модель
[window.]document.getElementById(«elementID»).style.position
Браузеры
Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.
Способы вертикального выравнивания по центру в CSS.
Способы вертикального выравнивания по центру в CSS.
Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.
Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.
1-ый способ
Этот метод предполагает, что мы устанавливаем некоторому элементу <div> способ отображения как таблица, после этого мы можем использовать в нём свойство vertical-align (которое работает по разному в различных элементах).
<div>
<div>
<div>
Некоторая полезная информация, которая должна располагаться по центру.
</div>
</div>
</div>
#wrapper{
display : table;
}
#cell{
display : table-cell;
vertical-align : middle;
}Плюсы
- Контент может динамически изменять высоту (высота не определена в CSS).
- Контент не обрезается в случае, если для него недостаточно места.
Минусы
- Не работает в IE 7 и меньше
- Много вложенных тэгов
2-ой метод
Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.
Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.
<div>
Content Here
</div>
#content {
position : absolute;
top : 50%;
height : 240px;
margin-top : -120px; /* минус от половины высоты */
}Плюсы
- Работает во всех броузерах.
- Нет лишней вложенности.
Минусы
- Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.
3-ий метод
В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.
<div>
<div>
здесь контент
</div>
</div>
#floater{
float : left;
height : 50%;
margin-bottom : -120px;
}
#content{
clear : both;
height : 240px;
position : relative;
}Плюсы
- Работает во всех броузерах.
- Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.
Минусы
- Думаю только один: что используется лишний пустой элемент.
4-ый метод.
Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).
<div>
Важная информация.
</div>
#content{
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
margin : auto;
height : 240px;
width : 70%;
}Плюсы
Минусы
- Не работает в Internet Explorer
- Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.
5-ый метод
С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.
<div>
Какая-то строка текста
</div>
#content{
height : 100px;
line-height : 100px;
}Плюсы
- Работает во всех броузерах.
- Не обрезает текст, если он не влез.
Минусы
- Работает только с текстом (не работает с блочными элементами).
- Если текста больше чем одна строка, то выглядит очень плохо.
Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.
Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:
Шаг 1
Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:
- #floater (чтобы выровнять контент по центру)
- #centred (центральный элемент)
- #side
- #logo
- #nav (список
<ul>)
- #content
- #side
- #bottom (для копирайтов и всего такого)
Напишем следующую html-разметку:
<!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></div>
<div>
<div>
<div><strong><span>A</span> Company</strong></div>
<ul>
<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>
<h2>Page Title</h2>
<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>
<h3>Heading 2</h3>
<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>
<p>
Copyright notice goes here
</p>
</div>
</body>
</html>Шаг 2
Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.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 и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.
Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;
Сейчас ваша страничка должна выглядеть приблизительно так:
Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.
Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.
Шаг 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. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.
Шаг 4
Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.
#centered {
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
border-radius : 8px;
}
h2, h3, h4, h5, h5, h6 {
font-family : Helvetica, Arial, sans-serif;
font-weight : normal;
color : #666;
}
h2 {
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, h3, h4 {
line-height : 1.6em;
}
a {
color : #f03;
}В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.
Совместимость
Как вы уже наверное предположили, основной источник проблем совместимости — Internet Explorer:
- Элементу #floater обязательно надо установить ширину
- В IE 6 лишние отступы вокруг меню
Результат.
Наложение (position: absolute;) | CSS примеры
Элемент с position: absolute; смещается на расстояние, указанное в свойствах top, right, bottom, left, от края ближайшего родителя с position не static. Передвинуть его относительно своего расположения можно с помощью margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.
После того, как свойство position примет значение absolute, размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.
Поместить элемент над другими элементами, убрав его из потока
Элемент с position: absolute; не влияет на размер родителя.
Элемент с position: absolute; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.
Расположить элемент с position: absolute; относительно границы ближайшего родителя с position не static
top
bottom
родительский элементposition: relative;
дочерний элемент position: absolute;
left
right
Свойства top, right, bottom, left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<style>
.raz {
position: relative;
background: mistyrose;
}
.absolute {
position: absolute;
top: 0;
background: lightpink;
}
</style>
<div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<span>Элемент</span>
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
</div>
Если свойство border задано ближайшему родителю с position не static, то элемент смещается относительно внутреннего края рамки, созданной этим свойством.
Значения свойств top и bottom в процентах рассчитываются от высоты за минусом border-top-width и border-bottom-width ближайшего родителя с position не static. Значения свойств left и right в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.
Использование свойств top или bottom, left или right зависит от конкретной ситуации.
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27Элемент28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50<style>
.raz {
position: relative;
border: 5px solid red;
}
.absolute {
position: absolute;
top: -5px;
background: lightpink;
}
</style>
<div>
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<span>Элемент</span>
28 29 30 31 32 33 34 35 36 37 38 39 40
</div>
Ширина и высота элемента с position: absolute; относительно размера ближайшего родителя с position не static
Ширина элемента с position: absolute; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: absolute; ведут себя как элементы с display: block; и position: absolute;.
Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto .
Стили, чтобы растянуть блок на всю ширину и высоту родителя без border, но с position не static:
left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box;
С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; . Если расстояние от left не auto до right не auto меньше width, то свойство right игнорируется .
Свойство height в процентах не заменяется на height: auto;, даже когда ближайший родитель имеет height: auto;.
Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible
Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с position: absolute;.
Позиционирование вложенного элемента относительно родителя
Родитель с position: static; пропускается. Если нет родителя с position не static, то положение элемента рассчитывается относительно границы области просмотра окна браузера .
Чтобы абсолютно позиционированный блок растянуть на всё содержимое вместе со скроллингом ближайшего позиционированного предка, нужно обернуть содержимое в ещё один тег, относительно которого позиционировать блок .
Родитель с position: static; и overflow не visible, стоящий внутри позиционированного родителя, не прячет содержимое потомка с position: absolute;.
Свойства width, margin и padding в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.
Абсолютное позиционирование в CSS: понять раз и навсегда
Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.
Введение в позиционирование
Когда вы устанавливаете position: absolute , на первый план выходит не сам элемент, а его родительский контейнер, поскольку он и осуществляется позиционирование в CSS. Сложность в том, что это не всегда непосредственный родитель элемента.
Рассмотрим код с четырьмя дивами, вложенными друг в друга по принципу матрешки.
Блоки box-1 , box-2 и box-3 для красоты отцентрированы с помощью поля свойств: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.
body {
дисплей: гибкий;
}
.box-1,
.box-2,
.box-3 {
дисплей: гибкий;
маржа: авто;
} Все 4 элемента имеют позиционирование по умолчанию. На данный момент верстка выглядит следующим образом:
.box-4 без позицииОтносительно чего позиционируем?
Чтобы спозиционировать себя, элемент должен знать две вещи:
- какой родитель станет точкой отсчета;
- нанесение ущерба относительно точки отсчета (сверху, снизу, справа или слева).
Если определить позиция: абсолютная для box-4 , этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты ущерба не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).
Теперь добавим свойства вверху: 0 и осталось: 0 . Элемент должен определить, какой родительский контейнер должна быть точкой отсчета для этих координат.Ей становится ближайшим элементом с нестатической позицией (чаще всего позиция: родственница). box-4 начинает поочередно опрашивать своих предков. Ни ящик-3 , ни ящик-2 , ни ящик-1 не подходят, так как имеют позиционирование в CSS по умолчанию ( сброшено ).
Если позиционированный предок не нашелся, элемент размещается относительно тела документа ( body ):
установить позиция: относительная для элемента box-1 , точка отсчета станет он:
Абсолютно позиционированный элемент относительно ближайшего позиционированного предка.
Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.
Если установить позиция: относительная также для box-2 , то box-4 будет позиционироваться относительно него, ведь этот предок ближе.
Аналогично и для контейнера box-3 :
А вот и наглядный красивый CSS-пример поиска позиционированного предка:
Перевод статьи Как раз и навсегда понять CSS Position Absolute.
Еще больше полезных статей по CSS:
.Выравнивание блока div со своимством position: absolute или fixed по центру.
Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.
Здесь есть несколько моментов, которые не совсем просто воспринимаются. На одном из них мне бы хотелось сегодня остановиться.
Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.
Для этого используется стандартная CSS конструкция: auto.
Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (абсолютное) или фиксированное положение (фиксированное). Такая ситуация иногда бывает.
Т.е. в данном случае наш пример принимает следующий вид.
Есть еще более современное решение этой проблемы — использование flexbox.
Подробнее здесь.
позиция: относительная; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга
позиция: абсолютная; — собственно говоря, само абсолютное позиционирование.
После произведенной манипуляции маржа: авто работать уже перестает.
Как быть? Как можно снова выровнять блок по центру?
Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.
Осталось
: 50%; — смещаем блок относительно родительского на 50% влево.
поле слева: -150 пикселей; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательное отступом.
Если ширина блока задается в процентах , то решение может быть следующим:
Если по центру нужно выровнять текст с текстом:
Строка текста
Дело в том, что, когда блоку присваивается свойство с position: absolute.Ширина блока с величиной width: auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.
Все, что было сказано выше про имеют положение: абсолютно аналогично можно применить и к блокам, которые положение: фиксированное.
Есть еще более современное решение этой проблемы — использование flexbox.
Подробнее здесь.
.CSS: выравнивание по центру
CSS: выравнивание по центруЦентрирование
Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:
В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:
Центрирование строк текста
Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке.Для этого CSS обладает свойством ‘text-align’:
П {выравнивание текста: центр}
h3 {text-align: center} отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:
Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.
Центрирование блока или изображения
Иногда центрировать нужно не текст, а блок в целом.Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе всю гибкий, он просто займёт доступную ширину. Вот пример:
P.blocktext {
маржа слева: авто;
маржа-право: авто;
ширина: 6em
}
...
Этот довольно ...
Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.
Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:
IMG.displayed {
дисплей: блок;
маржа слева: авто;
margin-right: auto}
...
Следующее изображение центрировано:
Вертикальное центрирование
CSS уровня 2 не обладает своим вертикальным центрирования. Вероятно, оно появится в версии CSS уровня 3 (см.ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы может быть выровнено по центру вертикально.
Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне, что находится внутри блока, позиционированного абсолютно и по высоте окна.
DIV.container {
мин-высота: 10em;
дисплей: таблица-ячейка;
вертикальное выравнивание: средний}
...
Этот маленький абзац ...
Этот маленький абзац центрирован вертикально.
Центрирование по вертикали в CSS уровня 3
Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается.Но если вам известно, что частичное перекрытие текста не может стать проблемой в вашем документе, вы использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:
Этот абзац выровнен вертикально по центру.
Для документа, выглядит который вот так:
Этот абзац…
таблица стилей выглядит так:
div.container3 {
высота: 10em;
Позиция : относительная } / * 1 * /
div.container3 p {
маржа: 0;
позиция: абсолютная; / * 2 * /
верх: 50%; / * 3 * /
преобразование: перевод (0, -50%) } / * 4 * / Основные правила:
- Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
- Сам элемент сделайте абсолютно позиционированным (позиция: абсолютная).
- Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50% ‘здесь означают 50% высоты контейнера.)
- Используйте перевод, чтобы переместить вверх на половину своей собственной высоты. (‘50% ‘- перевод (0, -50%)’ указать на высоту самого элемента.)
Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS появилась новая техника.Она на основе нового ключевымом слове ‘flex’ для свойств ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документ, если у этого документа правильная структура.
Этот абзац выровнен по центру вертикально.
таблица стилей выглядит следующим образом:
div.container5 {
высота: 10em;
дисплей: гибкий;
align-items: center }
div.container5 p {
маржа: 0} Вертикальное и горизонтальное центрирование в CSS уровня 3
Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.
Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова («Центр!»), Так что ширина абзаца должна быть равна ширине этого слова.
Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:
Центр!
В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правил ‘осталось: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:
div.container4 {
высота: 10em;
position: relative}
div.container4 p {
маржа: 0;
фон: желтый;
позиция: абсолютная;
верх: 50%;
осталось: 50%;
поле-право: -50%;
преобразовать: перевести ( -50%, -50%)} Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.
Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:
с этой таблицей стилей:
div.container6 {
высота: 10em;
дисплей: гибкий;
align-items: center;
justify-content: center }
div.container6 p {
маржа: 0} т.е. единственным дополнением ‘justify-content: центр’. Точно также, как ‘align-items’ определяют вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяют горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойств ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.
Центрирование в области просмотра в CSS уровня 3
Контейнером по умолчанию для абсолютно позиционированных элементов является областью просмотра. (В случае c браузером это окно «Поиск»). Таким образом, центрирование элемента в области просмотр не вызывает сложности. Далее приведен полный пример.(В этом примере используется синтаксис HTML5.)
<стиль>
body {
background: white}
раздел {
фон: черный;
цвет белый;
радиус границы: 1em;
отступ: 1em;
позиция: абсолютная;
верх: 50%;
осталось: 50%;
поле-право: -50%;
преобразование: перевести (-50%, -50%) }
<раздел>
Красиво выровнен по центру
Этот текстовый блок выровнен вертикально по центру.
И горизонтально, если окно достаточно широкое.
Вы можете увидеть результат в отдельном документ.
Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50% ». Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую отметку, что максимальное длина линии снова равняется ширине контейнера.
Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило «поле справа: -50%» и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.
(Использование свойств ‘translate’ для центрирования в области просмотра было впервые предложено «Чарли» в ответе на сайте Stack Overflow.)
Навигация по сайту
.CSS: элемент в центре — dr.Brain
Эта статья будет полезна для тех, кто только начинает свой путь в веб-разработке. Выравнивание элемента по центру — достаточно распространенная задача, но из нас все равно когда-то испытывал связанные с этим затруднения и искал оптимальные способы выравнивания по центру одного блока относительно другого c помощью Google или Stackoverflow. Несомненно, это простая задача. Однако наличие большого количества элементов и стилей приводит к обидным ошибкам.
Ниже мы разберем несколько способов выравнивания блока по центру.
Выравнивание текста
Метод text-align: center , пожалуй самый распространенный. Обычно он используется для горизонтального выравнивания по центру текста. Кроме того, он успешно используется и для div .
Как это делается?
- вокруг элемента, который нужно выровнять по центру, создайте родительский блок (обычно он называется обертка или контейнер),
- задайте для этого (родительского) элемента CSS-свойство text-align: center ,
- для выравниваемого элемента создайте свойство display: inline-block .
В примере для синего квадрата есть блок-обертка blue-square-container , для которого определено выравнивание текста по центру text-align: center , а для самого квадрата есть свойство display: inline-block .
следует обратить внимание на то, что по умолчанию для свойств display div получает значение блока и поэтому занимает всю доступную ширину 100% и не выравнивается по правилам строчных элементов.
В свою очередь для inline-block элемента:
- ширина определяется содержимым или установленным фиксированным размером,
- выравнивание относительно родительского блока происходит по правилам, установленным для строчных элементов.
Маржа: авто
Другой распространенный способ центрирования блока по горизонтали связан с автовырвниванием левого и правого внешних отступов (например: маржа: 0 auto ).В этом случае не имеет значения: есть ли родительский элемент и что с ним происходит.
Мы просто применяем маржа: 0 авто к желаемому блоку, и это будет работать, если у выравниваемого элемента есть фиксированная ширина.
margin: 0 auto — короткая запись CSS-свойств, определяющая верхний и нижний внешние отступы равными 0, и автоматическое определение ширины для левого и правого внешних отступов.
Важно, чтобы для выравниваемого элемента была установлена фиксированная ширина (в случае для желтого квадрата width: 100px ), без нее браузер не сможет рассчитать значения правого и левого внешнего отступов, чтобы установить элемент по центру.
Вместо 0 можно установить любые необходимые значения для верхнего и нижнего внешних отступов.
Еще один интересный прием — установить значение auto только для margin-left или только для margin-right , что позволит сместить элемент, соответственно, вправо или влево (рекоменд).
Абсолютное позиционирование
Элемент с абсолютным позиционированием можно link в любом месте страницы, но с одной особенностью.
Элемет с абсолютным позиционированием выпадает из потока страницы. То есть остальные элементы ведут себя так, как абсолютно позиционированного элемента не существует.
Почему это важно?
Потому, что при некорректном использовании данного свойства, можно спровоцировать наложение элементов.
Если мы хотим просто связать блок по центру, как в двух предыдущих примерах, нужно выполнить три действия:
- установить элементу свойство позиция: абсолютная ,
- применить свойство осталось: 50% ,
- установить левое поле равной ширины ширины элемента с отрицательным значением.
В данном случае для этого примера создан зеленый квадрат с такими же размерами, как и в остальных случаях, то есть ширина равна 100 пикселей.
Свойства позиция: абсолютная и осталось: 50% указать браузеру на необходимость сместить элемент на 50% влево. В этом случае на отметке 50% будет находиться левый край центрирующего элемента, а не его середина.
Наконец, для того, чтобы выровнять элемент по центру, мы смещаем его влево на половину ширины, за счет margin-left с отрицательным значением.
Следует помнить, что расчет положения элемента с абсолютным позиционированием осуществляется относительно любого из родительских элементов с помощью «position: relative» или относительно страницы при их отсутствии.
Преобразовать / перевести
До сих пор мы изучали методы выравнивания элементов по горизонтали. Но что делать, если элемент должен находиться точно в центре страницы (как по горизонтали, так и по вертикали).
Проделаем это вторым красным квадратом из примера (смотри выше).
Хотя мы все еще применяем абсолютное позиционирование и margin-left: 50% , появляются и два новых CSS-свойства.
Устанавливается верхний внешний отступ равным 50%: Верхняя маржа: 50% , мы смещаем верхний край элемента к центру. Но, аналогично предыдующему примеру, в центре по вертикали оказывается верхний край элемента, а не его середина.
Вот почему нам нужно еще одно свойство, которое называется transform
С помощью transform можно делать разные крутые штуки, в том числе: смещение, ротацию, масштабирование.Но в данном случае нас интересует именно смещение ( перевод ).
Создаем для центрируемого элемента свойство transform: translate (-50%, -50%) , и…
Наш красный квадрат находится в центре как по горизонтали, так и по вертикали страницы.
Этот метод часто используется в адаптивной верстке и не требует определения фиксированных размеров элемента, как в примере с абсолютным позиционированием.
Flexbox
Flexbox — одна из популярных моделей позиционирования и выравнивания элементов на странице.
Если Вы не знакомы с flexbox, воспользуйтесь возможностью Flexbox Froggy — это увлекательный и веселый интерактивный способ изучения всех возможностей модели flexbox.
Для того, чтобы связать элемент в центре (по горизонтали и вертикали) с помощью flexbox, нужно выполнить следующие действия:
- HTML, body и родительский контейнер должны иметь высоту 100%,
- для родителського контейнера нужно установить Дисплей: шлейф ,
- так же для родительского контейнера нужно установить align-items: center ,
- еще для родительского контейнера нужно установить justify-content: center .
Устанавливая дисплей: flex , мы создаем flex-контейнер.
align-items: center определить вертикальное выравнивание всех дочерних элементов по центру родительского.
justify-content: center по действию подобен предыдущему свойству, но работает в другом направлении — горизонтальном.
Этот метод хорош тем, что отлично подходит для адаптивной верстки и не требует вычислений внешних отступов.
Спасибо за внимание.
Перевод статьи Стивен Сан «Как сосредоточить вещи со стилем в CSS».
.