Вертикальное центрирование элементов переменной высоты внутри контейнера с помощью CSS | by Hajime Yamasaki Vukelic
Hajime Yamasaki Vukelic
·Подписаться
3 минуты чтения·
18 декабря 2016 г.Horizont Выравнивание элементов по центру в CSS довольно просто, и это делалось много раз с использованием различных методов. Вертикальное центрирование, с другой стороны, все еще является своего рода искусством. Хотя я не эксперт по браузерам и механизмам рендеринга, тот факт, что страница в большинстве браузеров настроена на вертикальное перемещение, а ширина ограничена областью просмотра, дает нам намек на то, почему это может иметь место.
Вы, разработчик, наверняка пришли на эту страницу уставшими и жаждущими ответов (и столько раз обманутыми!), так что не буду сразу утомлять вас теорией. Позвольте мне сначала раскрыть код, а потом мы поговорим о том, как он работает.
Center me!
Что мы будем делать с вышеприведенной разметкой, так это вертикально центрировать дочерний элемент внутри родителя (на самом деле нас не волнует горизонтальное центрирование , но это довольно просто, как вы увидите), и мы не хотим, чтобы дочерний элемент имел фиксированную высоту.
Вот CSS:
.container {
пробел: nowrap;
} .container:after {
содержимое: '';
дисплей: встроенный блок;
высота: 100%;
вертикальное выравнивание: посередине;
ширина: 0;
}.child {
display: inline-block;
вертикальное выравнивание: посередине;
пробел: обычный;
} Как это работает. Если вы плохо знакомы с псевдоэлементами, они действуют как элементы, которые добавляются (:после ) или добавляются (:до ) к содержимому элемента, для которого они определены. Добавляя один элемент в контейнер, мы фактически добавляем родственного элемента для дочернего элемента. Когда у двух соседних братьев и сестер vertical-align: middle Правило на них определено, они выравниваются друг с другом по вертикали по середине. Делая псевдоэлемент равным 100% высоты родительского элемента, мы эффективно выравниваем середину дочернего элемента с серединой родительского элемента.
Вы должны знать несколько вещей, прежде чем сходить с ума по этому поводу:
Приведенный выше код не центрируется по горизонтали, но вы можете добиться этого, добавив правило text-align: center к родителю, так как дочерние элементы всегда встроенный или встроенный блок элементов.
Дочерний элемент должен быть встроенным или встроенным блоком . Если вы используете блочный элемент, правило вертикального выравнивания больше не применяется. Если вам нужен блочный элемент, сделайте его встроенным блоком и задайте соответствующую ширину.
правило пробела для родительского элемента должно присутствовать, в противном случае псевдоэлемент :after переносится ниже дочернего элемента на небольшой ширине, отменяя вертикальное выравнивание. 9Правило 0039 white-space для дочернего элемента является необязательным, но оно предназначено для сброса эффекта родительского правила white-space .
Задав родительскому элементу либо верхнее, либо нижнее заполнение, либо и то, и другое, вы можете точно настроить выравнивание, поскольку псевдоэлемент занимает 100% вертикального пространства внутри заполнения (также известного как поле содержимого).
Вы можете увидеть этот код в действии на JSFiddle.
В качестве бонуса, если вы используете SASS, вот набор миксинов, которые вы можете использовать для достижения этой настройки:
@mixin vc-parent() {
пробел: nowrap;
&:after {
содержимое: '';
дисплей: встроенный блок;
высота: 100%;
вертикальное выравнивание: посередине;
ширина: 0;
}
}@mixin vc-child() {
display: inline-block;
вертикальное выравнивание: посередине;
пробел: обычный;
} Базовое обучение ZURB | Решение проблем с помощью Flexbox
CSS — это здорово. Ну, большую часть времени. По какой-то причине вертикальное выравнивание содержимого (особенно когда родительский элемент не имеет высоты) — это боль, требующая всевозможных хаков и display: table; ерунда. Он берет то, что кажется простым, и делает его запутанным и болезненным. К счастью, Flexbox решает многие распространенные проблемы макета, с которыми мы сталкиваемся в CSS и плавающих сетках.
На этом уроке вы узнаете, как использовать Flexbox для решения вертикального центрирования в ваших проектах.
Вы можете спросить, почему бы не использовать vertical-align:middle? Что ж, это тоже не работает так, как вы ожидаете. Иногда CSS немного шаткий.
К счастью, у нас есть Flexbox. Flexbox и гибкая сетка Foundation решают многие проблемы макета, и вертикальное выравнивание — одна из них.
Flexbox — это более новая парадигма компоновки/отображения с двумя ключевыми компонентами: Flex-родители (указывается «display: flex») и flex-потомки (настраиваются с помощью свойства flex css).
Краткий обзор преимуществ Flexbox включает:- Размер столбцов автоматически изменяется до ширины контейнера
- Выравнивание по левому краю, середине, правому краю или по ширине
- Отображать элементы в любом порядке и переворачивать на лету
- Выровнять по вертикали!
Первая и действительно приятная особенность Flexbox заключается в том, что дочерние элементы элемента display: flex имеют одинаковую высоту.
Для этого в Foundation есть компонент Equalizer, который вам не нужен с Flexbox. Это очень удобно для макетов карточного типа. Итак, если у вас есть такая установка:
Все ваши столбцы в этой строке будут иметь одинаковую ширину (если мы не добавим класс размеров, например .small-4) и будут иметь высоту самого высокого столбца.
Итак, давайте сделаем то, ради чего пришли сюда. Вертикальное выравнивание!
Добавьте класс .align-middle к .row для автоматического вертикального выравнивания столбцов в строке.
Больше никакой возни с фиксированной высотой, абсолютным положением или преобразованиями. Посмотрите на результаты:
Отлично. Но иногда нам нужно выровнять по вертикали только один столбец в строке.
Вертикальное выравнивание отдельных столбцов подряд
Вместо этого вы можете выровнять отдельные столбцы в строке. Классы align-self-# дадут столбцу высоту auto и выровняют его. У вас есть несколько вариантов здесь:- .align-self-bottom
- .
