CSS вертикальное выравнивание для всех (включая макеты)

1. Давайте поговорим о CSS Вертикальное свойство выравнивания
2. Мы хотим центрировать контент, а не сам Div!
3. Свойство Position
4. Давайте сделаем наши грязные руки грязнее!
5. CSS Vertical Align Criers: слышали ли вы о Flexbox?
6. CSS больше не выравнивать слезы по вертикали
7. Ссылки и дальнейшее чтение

"CSS вертикальное выравнивание заставило меня на веревках!"

9 утра. Дождливый понедельник смыл воскресенье. Я чувствовал тяжесть серой недели работы передо мной, когда отряхивал свои заметки для сложного случая переменных CSS. Я не дышал до того, как в офис ворвался бородатый громоздкий мужчина с боевым носом. Он был в ярости. И он был моим коллегой. Похоже, он не спал с момента объявления CSS3. Возможно, это был его бледный цвет лица, но я знал, что у этого парня были самые разные проблемы поздней ночью.

"Что за спешка, приятель?"

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

«У меня есть хороший для вас. У меня проблемы с центрированием моего контента. Это плохо, очень плохо. Я не мог спать. И вы знаете, что? Все борются с этим, это может быть огромный случай - подумайте групповое действие и все такое ».

Глупый дурак не знал, во что он ввязался. Центрирование части контента по вертикали было огромным беспорядком, заваленным красной лентой. И это пошло вверх, вплоть до IE6. Но мне было плохо за бедного ублюдка. Что я могу сказать; Я лох за историю рыдания.

«Успокойся, Рикардо. Алекс Сантос, Esquire, мастер CSS, к вашим услугам».

, , ,

Возможно, это не так. Может быть, просто возможно, я украсил сказку.

Видите ли, мой коллега Рикардо - громоздкий, бородатый парень - самозабвенный манекен CSS. Однажды он сказал мне, что все еще использует <center> в своей разметке. С точки зрения мастерства вертикального выравнивания CSS, он - дурачок.

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

Но не бойтесь: если вы боролись с вертикальным выравниванием CSS - как мог бы быть мой коллега - вы попали в нужное место.

Откройте для себя OutSystems UI Framework для мобильных и веб-приложений

Давайте поговорим о CSS Вертикальное свойство выравнивания

Когда я начал работать над интерфейсной разработкой, у меня возникли небольшие проблемы с этим свойством. Я подумал, что его следует использовать как классическое свойство text-align. О, если бы это было так просто ...

Свойство CSS вертикальное выравнивание гладко работает с таблицами, но не с элементами div или любыми другими элементами. Когда вы используете его в элементе div, он выравнивает элемент рядом с другими элементами div, а не с содержимым - это то, что мы обычно хотим). Это работает только с display: inline-block ;.

Вот пример:

Увидеть перо 1 # Example_OutSystems Experts - Вертикальное выравнивание по элементам div Александр Сантос ( @alexandre_santos ) на CodePen ,

Мы хотим центрировать контент, а не сам Div!

У вас есть два подхода. Если у вас есть только некоторые элементы div с текстом - например, панель навигации - вы можете использовать свойство line-height - это означает, что вам нужно знать высоту элемента, но вам не нужно устанавливать высоту. Таким образом, ваш текст всегда будет в центре.

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

Посмотрите на этот пример:

Увидеть перо 2 # Example_OutSystems Experts - Навбар с высотой строки Александр Сантос ( @alexandre_santos ) на CodePen ,

Если содержимое, которое вы хотите центрировать, имеет более одной строки, лучше всего использовать таблицы div. Вы можете использовать реальные таблицы, но это не семантически правильно. Кроме того, если вам нужны перерывы для адаптивных целей, вам лучше использовать элементы div.

Чтобы это работало, вам нужно иметь родительский контейнер с display: table; свойство, и внутри этого контейнера у вас будет количество столбцов, которые вы хотите центрировать, с отображением: table-cell; (и вертикальное выравнивание: среднее;) свойство.

Давайте посмотрим на пример:

Увидеть перо 3 # Example_OutSystems Experts - Вертикальное выравнивание ячейки таблицы Александр Сантос ( @alexandre_santos ) на CodePen ,

Почему это работает с макетом таблицы, а не с элементами div? Потому что, когда у вас есть таблица, строки имеют одинаковую высоту. Таким образом, когда содержимое в ячейке не использует все доступное пространство по высоте, браузер автоматически добавляет вертикальный отступ для центрирования вашего содержимого.

Свойство Position

Давайте начнем с основ:

• position: static; - это значение по умолчанию. Элемент отображается в порядке HTML.
• положение: абсолютное; - используется для определения точной позиции, в которой должен быть элемент. Эта позиция всегда связана с ближайшим предком в относительной позиции (не статичной). Знаете ли вы, что происходит, если вы не определили точное положение элемента? Вы теряете контроль над этим! Он отображается случайным образом, полностью игнорируя поток документов. По умолчанию он отображается в левом верхнем углу.
• положение: относительное; - используется для позиционирования элемента относительно его нормального положения (статического). Эта позиция сохраняет порядок потока документа.
• положение: фиксированное; - используется для позиционирования элемента относительно окна браузера, поэтому он всегда виден в окне просмотра.

Примечание . Некоторые свойства, такие как top и z-index, работают только в том случае, если элемент имеет позицию (не статическую).

Давайте сделаем наши грязные руки грязнее!

Хотите выровнять прямоугольник по центру своей страницы?

Сначала получите элемент с относительной позицией и размерами, которые вы хотите. Например: 100% ширина и высота.

Второй шаг может отличаться в зависимости от ваших целевых браузеров, но вы можете использовать один из двух вариантов:

• Вариант старой школы : вам нужно знать точный размер вашей коробки, чтобы убрать половину ширины и половину высоты коробки. Как это:

Увидеть перо 4 # Example_OutSystems Experts - Позиционирование абсолютного с размером блока Александр Сантос ( @alexandre_santos ) на CodePen ,

• Классная новая опция CSS3 : добавьте свойство transform со значением перевода -50%, и оно всегда будет по центру. Как это:

Увидеть перо 5 # Example_OutSystems Experts - абсолютная позиция без размера Александр Сантос ( @alexandre_santos ) на CodePen ,

По сути, если вы хотите центрировать контент, никогда (никогда, никогда, никогда!) Не используйте top: 40% или left: 300px. Это отлично работает на ваших тестовых экранах, но не по центру. На самом деле, нет.

Помните фиксированную позицию? Вы можете сделать то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция в родительском элементе - она ​​всегда будет относительно окна браузера.

CSS Vertical Align Criers: слышали ли вы о Flexbox?

Вы можете использовать макет flexbox, вариант, что мой мальчик Динис написал некоторое время назад , Ах да, это намного лучше, чем любой из других доступных вариантов. С flexbox манипулирование элементами по-разному - детская игра. Даже Рикардо мог это сделать.

Проблема в том, что вам нужно отпустить некоторые браузеры, такие как IE9 и ниже. Отпусти ситуацию. Отпусти ... не могу больше сдерживаться. (Да, теперь он застрял у тебя в голове. Не за что.)

Вот пример того, как вертикально отцентрировать прямоугольник:

Увидеть перо 6 # Example_OutSystems Experts - макет Flexbox без размера блока Александр Сантос ( @alexandre_santos ) на CodePen ,

Используя макет flexbox, вы можете иметь более одного центрированного блока и правильно выровнять его. Но это история в другой раз!

CSS больше не выравнивать слезы по вертикали

Вертикальное выравнивание может быть очень похоже на Детский шампунь Джонсона: без слез. Если вы последуете тому, чему научились на этих нескольких примерах, вы также можете быстро освоить вертикальное выравнивание.

, , ,

Некоторое время спустя я прошел мимо дома Рикардо, а его там не было. Кто-то сказал мне, что он заснул на одном из многих удобных диванов нашей компании.

Когда я посмотрел на экран его ноутбука, хотя ...

Что, черт возьми, он делал? Играя в игры, пока он должен был работать?

Это целый лотерейный цвет для понедельника, который начался таким серым.

Ссылки и дальнейшее чтение

Изучите CSS Layout - Положение

Flexbox Froggy от Томас Парк

Мобильные веб-приложения: лучшие методы CSS для оптимальной производительности, от Dinis Carvalho

CSS Tricks - Руководство по Flexbox

Flexbox Playground - Кодбиен Габи