Семь методов центрирования с помощью CSS

Семь методов центрирования с помощью CSS

От автора: Центрирование элементов HTML на веб-странице кажется простым делом. Иногда это действительно так… но сложные разметки часто исключают некоторые решения, заставляя веб-разработчиков работать без сетки.

Центрирование элементов на странице по горизонтали, похоже, самое легкое, тогда как выполнить выравнивание по вертикали сложнее, а самое сложное – сочетание этих двух задач. При адаптивном дизайне мы редко знаем точную высоту или ширину элементов, что исключает множество возможностей. Как я подсчитал, нам остается по меньшей мере шесть методик центрирования в CSS. Я начну с самой простой и лучше всего поддерживаемой и перейду к самой сложной, работая над одним основным кодом:

Изображения обуви будут различаться, но всегда останутся исходного размера в 500px × 500px. Цвета модели HSL («тон-насыщенность-яркость» применены к фонам для поддержания устойчивой цветовой темы.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Горизонтальное центрирование с помощью text-alignment

Иногда самым лучшим остается очевидное решение:

Оно не выравнивает изображение по вертикали: чтобы его добиться, вам понадобилось бы добавить padding к div или margin-top и margin-bottom к его содержимому, оставляя возможность контейнеру получить высоту от собственного контента.

Центрирование с помощью margin: auto

И снова главным образом для горизонтального центрирования, и с теми же ограничениями, что у вышеприведенного метода с text-alignment:

Обратите внимание на display: block, в данном случае оно необходимо для того, чтобы изображение приняло margin: 0 auto.

Центрирование с table-cell

Применяется display: table-cell, а не настоящая разметка таблицы; позволяет как горизонтальное, так и вертикальное центрирование. Обычно требует добавления и манипулирования второго, внешнего элемента, который может быть чем угодно – от div до самого body.

CSS:

Заметьте, что width: 100% нужно для того, чтобы предотвратить свертывание div, и что внешнему контейнеру для вертикального центрирования содержимого потребуется некоторая высота. Попытка отцентрировать элемент по вертикали в body, кроме того, вовлечет стандартный прием – установку высоты html и body. Работает во всех браузерах, включая IE8+.

Абсолютное центрирование

Недавно представленная Стивеном Шоу (Stephen Shaw) методика хорошо поддерживается браузерами. Единственный недостаток ее в том, что для внешнего контейнера должен быть объявлен height в некоей форме:

Стивен продемонстрировал множество вариантов этого кода, описывая этот метод в своей статье в Smashing Magazine.

Центрирование с помощью translate

Новая методика Криса Койера (Chris Coiyer), использующая преобразования CSS. Также поддерживает горизонтальное и вертикальное центрирование:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Имеет несколько недостатков:

Коду преобразований CSS для работы во всех браузерах потребуются вендорные префиксы

Не работает в старых версиях IE (версии 8 и ранее)

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

Если в содержимом будет текст, текущие браузерные методы компоновки могут сделать переведенный текст нечетким.

Центрирование с помощью flexbox

Возможно, станет самым простым решением центрирования после исчезновения вариантов свойств и вендорных префиксов.

Во многих отношениях самое простое решение, но сдерживаемое множеством старых синтаксисов и недостатком поддержки в более старых версиях IE (хотя display: table-cell сойдет за приемлемое альтернативное решение). Полный CSS:

Сейчас спецификация уже окончена и устанавливается браузерная поддержка, и я раскрою свойство flexbox и его применение в будущей статье.

Центрирование с помощью calc

Более разностороннее, чем flexbox, при определенных обстоятельствах:

Все очень просто, calc дает вам возможность делать расчеты в зависимости от текущей разметки страницы. В вышеприведенной простой калькуляции 50% — это середина содержащего элемента, но его применение в отдельности установит верхний левый угол изображения в центр div’а. Нам нужно перенести эту позицию обратно на половину ширины и половину высоты изображения. Выражая это в полном виде:

Вы обнаружите, что в текущих браузерах эта методика, похоже, работает лучше всего над содержимым с фиксированными известными размерами:

И снова, я буду обсуждать calc в будущей статье. У этой техники почти те же потенциальные недостатки, что у flexbox: тогда как у нее хорошая поддержка в Firefox, начиная с версии 4, в более ранних браузерных версиях ей требуются вендорные префиксы, и совсем отсутствует поддержка в IE 8. Полный код изображения будет такой:

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

Автор: Dudley Storey

Источник: http://demosthenes.info/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree