Выравнивание по вертикали CSS
0 ∞Вертикальное выравнивание CSS — весьма непростая работа. Я видел достаточно людей, борющихся с этим, и постоянно обнаруживаю “критические” ошибки, когда дело доходит до реального адаптивного дизайна.
Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием — вы обратились по адресу.
- Поговорим о свойстве CSS vertical align
- Мы хотим центрировать контент, а не сам div!
- Свойство position
- Давайте приступим к делу!
- Вы слышали о спецификации flexbox?
- Ссылки и дополнительная литература
Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align”. Ах, если бы все было так просто…
CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами.
Когда вы используете его для div, то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block;.
У вас есть два выхода. Если у вас только элементы div с текстом, то можно использовать свойство line-height. Это означает, что нужно знать высоту элемента, но нельзя ее устанавливать. Таким образом, ваш текст будет всегда в центре.
Правда у этого подхода CSS выравнивания по вертикали есть недостаток. Если текст многострочный, тогда высота строки будет умножена на количество строк. Скорее всего, в этом случае, у вас получится ужасно сверстанная страница.
Взгляните на приведенный ниже пример.
Если контент, который вы хотите центрировать, состоит больше, чем из одной строки, тогда лучше использовать табличные div. Также можно использовать таблицы, но семантически это не правильно. Если вам нужны разрывы для адаптивных целей, лучше использовать элементы div.
Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle.
Почему это работает с табличной разметкой, но не с элементами div? Потому что у строк в таблице одинаковая высота. Когда содержимое ячейки таблицы не использует все доступное пространство по высоте, браузер автоматически добавляет вертикальные отступы, чтобы центрировать содержимое.
Начнем с основ выравнивания по вертикали CSS div:
- position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML;
- position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
- position: relative — используется для позиционирования элемента относительно его нормального положения (статического). Это значение сохраняет порядок потока документа;
- position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.
Примечание: некоторые свойства (top и z-index) работают только в том случае, если для элемента задано значение position (не static).
Вы хотите осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.
Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:
Старое свойство: нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите приведенный ниже пример.
Новое свойство CSS3: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотрите приведенный ниже пример.
В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.
Помните position: fixed? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.
Можно использовать flexbox. Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали. С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:
Используя flexbox расположение, можно центрировать несколько блоков.
Если вы примените то, что узнали из этих примеров, то сможете освоить CSS выравнивание блока по вертикали в кратчайшие сроки.
- Изучение CSS разметки
- FlexBox Froggy
- Полное руководство по flexbox
- Песочница flexbox
ВЛВиктория Лебедеваавтор-переводчик статьи «CSS Vertical Align for Everyone (Dummies Included)»
Пожалуйста, оставьте ваши отзывы по текущей теме статьи. За комментарии, дизлайки, подписки, лайки, отклики низкий вам поклон!
HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали. Способ 1. Древний. · GitHub
HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали.
Способ 1. Древний.
Show hidden characters
| Способ надежный, но для .wrap нельзя задать размеры в %. Плохо подходит для адаптива. | |
| ———— | |
| HTML | |
| <div> | |
| <div> </div> | |
| </div> | |
| CSS | |
. wrap { | |
| width: 400px; | |
| height: 400px; | |
| display: table-cell; | |
| /* Вертикальное выравнивание содержимого блока работает только в ячейках таблицы. Превращаем блок в ячейку */ | |
| vertical-align: middle; | |
| text-align: center; | |
| } | |
| .content { | |
| width: 200px; | |
| height: 200px; | |
| display: inline-block; | |
/* Горизонтальное выравнивание работает только для строчных элементов. Превращаем блок в строчный снаружи элемент */ | |
| } | |
| /* Для вложенных строчных элементов, в т. ч. для img, «display: inline-block» не требуется */ |
вертикальное выравнивание — CSS для вертикального центрирования четырех div рядом друг с другом внутри div-оболочки
Задавать вопрос
спросил
Изменено 1 год, 11 месяцев назад
Просмотрено 395 раз
Я пишу страницу, чтобы показать квитанцию. Он имеет следующие столбцы:
- описание.
- количество. Цена
- .
Я создал div для элемента и четыре div внутри для каждого столбца. У меня возникли проблемы с выравниванием разделов столбца по вертикали (поэтому описание, количество и цена центрированы по вертикали с изображением).
Я создал небольшую скрипку, показывающую, где я нахожусь — https://jsfiddle.net/j1dias/hpg32x7b/
Я думал, что могу использовать display:inline-block и vertical-align:center, но они не работают так, как я ожидал.
Я стараюсь не использовать flexbox. Также я бы предпочел не устанавливать высоту.
См. ниже html и css.
Спасибо.
HTML
<дел><дел> Название продукта
Описание продукта
9em;
}
.checkout-элемент {
положение: родственник;
переполнение: скрыто;
отображение: встроенный блок;
}
.checkout-item-image {
ширина: 15%;
плыть налево;
поле справа: 50px;
отображение: встроенный блок;
вертикальное выравнивание: посередине;
}
.checkout-item-image img {
вертикальное выравнивание: посередине;
максимальная ширина: 100%;
}
.checkout-item-описание {
ширина: 30%;
плыть налево;
поле справа: 50px;
отображение: встроенный блок;
вертикальное выравнивание: посередине;
}
.checkout-item-qty {
ширина: 5%;
плыть налево;
поле справа: 50px;
размер шрифта: 1.5em;
вес шрифта: полужирный;
выравнивание текста: по центру;
отображение: встроенный блок;
вертикальное выравнивание: посередине;
}
.checkout-item-total-price {
ширина: 5%;
плыть налево;
размер шрифта: 1.5em;
вес шрифта: полужирный;
выравнивание текста: вправо;
отображение: встроенный блок;
вертикальное выравнивание: посередине;
}
Кажется, что это поддерживается большинством браузеров.
Просто удалите 
Однако есть несколько способов центрировать элементы в
Этот метод используется, когда центрированный элемент состоит из одной строки, а высота его родителя фиксирована.