От автора: Центрирование элементов HTML на веб-странице кажется простым делом. Иногда это действительно так… но сложные разметки часто исключают некоторые решения, заставляя веб-разработчиков работать без сетки.
Центрирование элементов на странице по горизонтали, похоже, самое легкое, тогда как выполнить выравнивание по вертикали сложнее, а самое сложное – сочетание этих двух задач. При адаптивном дизайне мы редко знаем точную высоту или ширину элементов, что исключает множество возможностей. Как я подсчитал, нам остается по меньшей мере шесть методик центрирования в CSS. Я начну с самой простой и лучше всего поддерживаемой и перейду к самой сложной, работая над одним основным кодом:
|
1 2 3 |
<div class="center"> <img src="jimmy-choo-shoe.jpg" alt=""> </div> |
Изображения обуви будут различаться, но всегда останутся исходного размера в 500px × 500px. Цвета модели HSL («тон-насыщенность-яркость» применены к фонам для поддержания устойчивой цветовой темы.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееГоризонтальное центрирование с помощью text-alignment
Иногда самым лучшим остается очевидное решение:
|
1 2 |
div.center { text-align: center; background: hsl(0, 100%, 97%); } div.center img { width: 33%; height: auto; } |
Оно не выравнивает изображение по вертикали: чтобы его добиться, вам понадобилось бы добавить padding к div или margin-top и margin-bottom к его содержимому, оставляя возможность контейнеру получить высоту от собственного контента.
Центрирование с помощью margin: auto
И снова главным образом для горизонтального центрирования, и с теми же ограничениями, что у вышеприведенного метода с text-alignment:
|
1 2 |
div.center { background: hsl(60, 100%, 97%); } div.center img { display: block; width: 33%; height: auto; margin: 0 auto; } |
Обратите внимание на display: block, в данном случае оно необходимо для того, чтобы изображение приняло margin: 0 auto.
Центрирование с table-cell
Применяется display: table-cell, а не настоящая разметка таблицы; позволяет как горизонтальное, так и вертикальное центрирование. Обычно требует добавления и манипулирования второго, внешнего элемента, который может быть чем угодно – от div до самого body.
|
1 2 3 4 5 |
<div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div> </div> |
CSS:
|
1 2 3 |
.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; } .center-core { display: table-cell; text-align: center; vertical-align: middle; } .center-core img { width: 33%; height: auto; } |
Заметьте, что width: 100% нужно для того, чтобы предотвратить свертывание div, и что внешнему контейнеру для вертикального центрирования содержимого потребуется некоторая высота. Попытка отцентрировать элемент по вертикали в body, кроме того, вовлечет стандартный прием – установку высоты html и body. Работает во всех браузерах, включая IE8+.
Абсолютное центрирование
Недавно представленная Стивеном Шоу (Stephen Shaw) методика хорошо поддерживается браузерами. Единственный недостаток ее в том, что для внешнего контейнера должен быть объявлен height в некоей форме:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%); } .absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } |
Стивен продемонстрировал множество вариантов этого кода, описывая этот метод в своей статье в Smashing Magazine.
Центрирование с помощью translate
Новая методика Криса Койера (Chris Coiyer), использующая преобразования CSS. Также поддерживает горизонтальное и вертикальное центрирование:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 |
.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; } .center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto; } |
Имеет несколько недостатков:
Коду преобразований CSS для работы во всех браузерах потребуются вендорные префиксы
Не работает в старых версиях IE (версии 8 и ранее)
Внешнему контейнеру придется установить высоту (или получить ее каким-либо другим образом), так как от своего абсолютно расположенного контента он никакой высоты не получит.
Если в содержимом будет текст, текущие браузерные методы компоновки могут сделать переведенный текст нечетким.
Центрирование с помощью flexbox
Возможно, станет самым простым решением центрирования после исчезновения вариантов свойств и вендорных префиксов.
|
1 2 |
.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; } .center img { width: 30%; height: auto; } |
Во многих отношениях самое простое решение, но сдерживаемое множеством старых синтаксисов и недостатком поддержки в более старых версиях IE (хотя display: table-cell сойдет за приемлемое альтернативное решение). Полный CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.center { background: hsl(240, 100%, 97%); display: -webkit-box; /* СТАРЫЕ: Safari, iOS 6 и ранее; браузер Android, старый WebKit */ display: -moz-box; /* СТАРЫЙ: Firefox (может быть с ошибками) */ display: -ms-flexbox; /* СТАРЫЙ: IE 10 */ display: -webkit-flex; /* ОКОНЧАТЕЛЬНЫЙ С ПРЕФИКСАМИ Chrome 21+ */ display: flex; /* ОКОНЧАТЕЛЬНЫЙ: Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } |
Сейчас спецификация уже окончена и устанавливается браузерная поддержка, и я раскрою свойство flexbox и его применение в будущей статье.
Центрирование с помощью calc
Более разностороннее, чем flexbox, при определенных обстоятельствах:
|
1 2 |
.center { background: hsl(300, 100%, 97%); min-height: 600px;position: relative; } .center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); } |
Все очень просто, calc дает вам возможность делать расчеты в зависимости от текущей разметки страницы. В вышеприведенной простой калькуляции 50% — это середина содержащего элемента, но его применение в отдельности установит верхний левый угол изображения в центр div’а. Нам нужно перенести эту позицию обратно на половину ширины и половину высоты изображения. Выражая это в полном виде:
|
1 |
top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2)); |
Вы обнаружите, что в текущих браузерах эта методика, похоже, работает лучше всего над содержимым с фиксированными известными размерами:
|
1 |
.center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); } |
И снова, я буду обсуждать calc в будущей статье. У этой техники почти те же потенциальные недостатки, что у flexbox: тогда как у нее хорошая поддержка в Firefox, начиная с версии 4, в более ранних браузерных версиях ей требуются вендорные префиксы, и совсем отсутствует поддержка в IE 8. Полный код изображения будет такой:
|
1 2 3 4 |
.center img { width: 40%; height: auto; position: absolute; top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%); top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%); top: calc(50% - 20%); left: calc(50% - 20%); } |
Хотя существуют еще такие возможности, как применение псевдоэлементов для вертикального выравнивания, понимание этих шести приемов создаст любому веб-разработчику солидный ассортимент, на который можно положиться при центрировании элементов.
Автор: Dudley Storey
Источник: //demosthenes.info/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
