Как центрировать по вертикали css
Перейти к содержимому

Как центрировать по вертикали css

  • автор:

Как центрировать все по вертикали CSS

Нужно отцентровать весь текст с кнопкой по вертикали. Пробовал много способов, но так ничего не получилось.

body < background: #cc3354; color: #ffffff; font-family: 'PT Sans', sans-serif; >h1 < font-size: 36pt; margin-bottom: -15px; >.parent < margin-left: auto; margin-right: auto; padding: 10px; max-width: 1000px; >.child < padding: 10px; margin: 10px; height: 40px; >button < border-color: #ffffff; font-size: 20pt; text-align: center; border-radius: 20px; background: #cc3354; padding: 10; border: 2px solid #ffffff; height: 42px; width: 140px; >a:link < color: #ffffff; text-decoration: none; >a:visited < color: #ffffff; text-decoration: none; >a:hover < color: #ffffff; text-decoration: none; >a:active < color: #ffffff; text-decoration: none; >.button-size < width:100%; >.button-location
     Внимание     

Внимание

Русский писатель, философ и общественный деятель XIX века Владимир Одоевский в незаконченном утопическом романе «4338-й год», написанном в 1837 году, похоже, первым предсказал появление современных блогов и интернета: в тексте романа есть строки: «между знакомыми домами устроены магнетические телеграфы, посредством которых живущие на далёком расстоянии общаются друг с другом».

Код почему-то не работает в Stack Overflow. Скорее всего из-за Google Fonts. Запускайте код отдельно.

Vertical align CSS — выравнивание по вертикали в помощью CSS

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

В данной статье мы рассмотрим:

  • свойство vertical-align , как и когда оно работает;
  • метод центрирования по вертикали элемента с известной высотой;
  • центрирование по вертикали элементов с изменяемой высотой.

Обновлено: 2022-04-19 17:49:07 МК Михаил Кузнецов автор материала

Vertical-align CSS

Свойство vertical-align влияет только на элементы, у которых свойство display имеет значения inline , inline-block или table-cell . Оно принимает в качестве значений число, проценты или ключевое слово.

Длина и проценты выравнивают базовую линию элемента на соответствующем расстоянии от базовой линии родительского элемента.

Ключевые значения vertical-align могут быть следующими:

  • baseline;
  • sub;
  • super;
  • text-top;
  • text-bottom;
  • middle;
  • top;
  • bottom.

Большинство из них не требует дополнительного объяснения. Стоит отметить только sub и super , которые отображают элемент как подстрочный и надстрочный, не изменяя при этом размер шрифта.

Рассмотрим наглядный пример вертикального выравнивания текста CSS с помощью vertical-align . У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:

 

grilled bacon

tasty bacon

crispy bacon

bacon

Чтобы всё аккуратно выровнять, можно задать контейнерам сетки свойство display: inline-block и использовать для изображений свойство vertical-align: bottom . Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и легко добиться нужного результата.

Центрирование по вертикали

В примере, приведенном ниже, у нас есть div с чёрным фоном и рамкой. Внутри него находится блок поменьше с нужной нам шириной и высотой:

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt dolores, consequatur dolorem, dignissimos debitis distinctio. Voluptas eligendi fuga voluptatem eos.

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

Применив к контейнеру свойство position: relative , можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:

.container < position: relative; background: #444; >.box

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

Этот приём CSS вертикального выравнивания блока работает, но его недостаток заключается в неизменяемой ширине элементов. Поэтому он будет далеко не лучшим решением для работы над адаптивным дизайном.

Адаптивное центрирование по вертикали

Fluid vertical center

Отличные результаты для центрирования по вертикали элементов с изменяемой высотой можно получить, объединив vertical-align: middle с псевдоэлементами. Возьмём тот же пример с блоком внутри контейнера, но в этот раз блок будет иметь изменяемую высоту.

Главный приём здесь — создать невидимый элемент ( используя псевдоэлемент ), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle . После этого нужно выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center . Затем центрировать блок по горизонтали, используя text-align: center :

.container < height: 400px; margin: 20px; background: #444; font-size: 0; text-align: center; >.container:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.box

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

МК Михаил Кузнецов автор-переводчик статьи «

Вертикальное выравнивание

Утилиты для управления вертикальным выравниванием встроенного блока или поля ячейки таблицы.

Используйте align-baseline , чтобы выровнять базовую линию элемента с базовой линией его родителя.

Быстрая коричневая лиса прыгает через ленивую собаку.

span class="inline-block align-baseline . ">. span>

Используйте align-top , чтобы выровнять верх элемента и его потомков с верхом всей строки.

Быстрая коричневая лиса прыгает через ленивую собаку.

span class="inline-block align-top . ">. span>

Используйте align-middle , чтобы выровнять середину элемента с базовой линией плюс половину x-высоты родительского элемента.

Быстрая коричневая лиса прыгает через ленивую собаку.

span class="inline-block align-middle . ">. span>

Используйте align-bottom , чтобы выровнять нижнюю часть элемента и его потомков с нижней частью всей строки.

Быстрая коричневая лиса прыгает через ленивую собаку.

span class="inline-block align-bottom . ">. span>

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

Быстрая коричневая лиса прыгает через ленивую собаку.

span class="inline-block align-text-top . ">. span>

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

Быстрая коричневая лиса прыгает через ленивую собаку.

span class="inline-block align-text-bottom . ">. span>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : align-top , чтобы применять утилиту align-top только при hover .

p class="align-middle hover:align-top"> p> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: align-top , чтобы применить утилиту align-top только на экранах среднего размера и выше.

p class="align-middle md:align-top"> p> 

Если вам нужно использовать одноразовое vertical-align value , которое не включено в Tailwind по умолчанию, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

div class="align-[4px]"> div> 

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

Copyright © 2023 Tailwind Labs Inc.

На этой странице
  • Краткая справка
  • Основы использования

Refactoring UI by Adam Wathan and Steve Schoger

From the creators of Tailwind CSS

Make your ideas look awesome, without relying on a designer.

Вертикальное выравнивание CSS

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

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

Обновлено: 2022-01-15 17:39:37 ВЛ Виктория Лебедева автор материала

Поговорим о свойстве CSS vertical align

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “ text-align ”. Ах, если бы все было так просто.

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

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

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

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

Взгляните на приведенный ниже пример.

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

Чтобы это работало, должен быть родительский контейнер с display: table , а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle .

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

Свойство position

Начнем с основ выравнивания по вертикали 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?

Можно использовать flexbox . Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали . С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

Используя flexbox расположение, можно центрировать несколько блоков.

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

Ссылки и дополнительная литература

  • Изучение CSS разметки
  • FlexBox Froggy
  • Полное руководство по flexbox
  • Песочница flexbox

ВЛ Виктория Лебедева автор-переводчик статьи «

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

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