По центру div вертикально: Все способы вертикального выравнивания в CSS / Хабр

Leave a Comment / Разное / By /

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

​Основы использования

​Baseline

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

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

<span>...</span>

​Top

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

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

<span>...</span>

​Middle

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

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

<span>...</span>

​Bottom

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

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

<span>. ..</span>

​Text Top

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

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

<span>...</span>

​Text Bottom

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

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

<span>...</span>

​Применяя условно

​Наведение, фокус и другие состояния

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

<p>
  <!-- ... -->
</p>

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

​Контрольные точки и медиа-запросы

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

<p>
  <!-- ... -->
</p>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​Использование пользовательских значений

​Произвольные значения

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

<div>
  <!-- ... -->
</div>

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

CSS-свойство vertical-align задает выравнивание блока inline,inline-block или table-cell.

Свойство CSS vertical-align устанавливает вертикальное выравнивание встроенного блока, блока встроенного блока или ячейки таблицы.

Try it

Свойство вертикального выравнивания может использоваться в двух контекстах:

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

Обратите внимание, что vertical-align применяется только к элементам inline, inline-block и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока .

Syntax

/ * Значения ключевых слов * /
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/ * значения <длина> * /
vertical-align: 10em;
vertical-align: 4px;
/ * значения <процент> * /
vertical-align: 20%;
/ * Глобальные значения * /
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

Свойство vertical-align указывается в качестве одного из значений, перечисленных ниже.

Значения для встроенных элементов

Parent-relative values

Эти значения выравнивают элемент по вертикали относительно его родительского элемента:

baseline

Выравнивает базовую линию элемента с базовой линией его родителя. Базовая линия некоторых замененных элементов , таких как <textarea> , не указана в спецификации HTML, что означает, что их поведение с этим ключевым словом может различаться в разных браузерах.

sub

Выравнивает базовую линию элемента с абонентской линией его родителя.

super

Выравнивает базовую линию элемента с надстрочной базовой линией его родителя.

text-top

Выравнивает верхнюю часть элемента со шрифтом родительского элемента.

text-bottom

Выравнивает нижнюю часть элемента с нижней частью шрифта родительского элемента.

middle

Выравнивает середину элемента с базовой линией плюс половину высоты x родителя.

<length>

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

<percentage>

Выравнивает базовую линию элемента по указанному проценту над базовой line-height его родительского элемента со значением в процентах от свойства line-height . Отрицательное значение допускается.

Line-relative values

Следующие значения выравнивают элемент по вертикали относительно всей линии:

top

Выравнивает верхнюю часть элемента и его потомков с верхней частью всей линии.

bottom

Выравнивает нижнюю часть элемента и его потомков с нижней частью всей линии.

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

Значения для ячеек таблицы

baseline (и sub , super , text-top , text-bottom , <length> и <percentage> )

Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек в ряду,которые выровнены по базису.

top

Выравнивает верхний край набивки ячейки с верхним рядом.

middle

Центрирует обивку ячейки в пределах ряда.

bottom

Выравнивает нижний край набивки ячейки с нижним рядом.

Допускаются отрицательные значения.

Formal definition

Initial valuebaseline
Applies toэлементы inline-level и table-cell. Это также относится к ::first-letter и ::first-line
.
Inheritedno
Percentagesобратитесь к line-height самого элемента
Computed valueдля значений в процентах и длины,абсолютная длина,в противном случае ключевое слово как указано
Animation typea length

Formal syntax

vertical-align =   [ first | last ]        ||  <'alignment-baseline'>  ||  <'baseline-shift'>

Examples

Basic example

HTML
<div>An <img src="frame_image. svg" alt="link" /> image with a default alignment.</div>
<div>An <img src="frame_image.svg" alt="link" /> image with a text-top alignment.</div>
<div>An <img src="frame_image.svg" alt="link" /> image with a text-bottom alignment.</div>
<div>An <img src="frame_image.svg" alt="link" /> image with a middle alignment.</div>
CSS
img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
Result

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

HTML
<p>
top:         <img src="star.png"/>
middle:      <img src="star.png"/>
bottom:      <img src="star.png"/>
super:       <img src="star.png"/>
sub:         <img src="star.png"/>
</p>
<p>
text-top:    <img src="star.png"/>
text-bottom: <img src="star.png"/>
0.2em:       <img src="star.png"/>
-1em:        <img src="star. png"/>
20%:         <img src="star.png"/>
-100%:       <img src="star.png"/>
</p>
Result

Вертикальное выравнивание в ячейке таблицы

HTML
<table>
  <tr>
    <td>baseline</td>
    <td>top</td>
    <td>middle</td>
    <td>bottom</td>
    <td>
      <p>There is a theory which states that if ever anyone discovers exactly
      what the Universe is for and why it is here, it will instantly disappear and
      be replaced by something even more bizarre and inexplicable.</p>
      <p>There is another theory which states that this has already happened.</p>
    </td>
  </tr>
</table>
CSS
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
table, th, td {
  border: 1px solid black;
}
td {
  padding: 0.5em;
  font-family: monospace;
}
Result

Specifications

Specification
Каскадные таблицы стилей уровня 2, редакция 1 (CSS 2. 1), спецификация
# propdef-vertical-align

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
vertical-align

1

12

1

4

4

1

4.4

18

4

14

1

1.0

See also

  • Типичные случаи использования Flexbox,раздел «Центральный элемент».
  • line-height, text-align, margin
  • Понимание vertical-align или «Как (не) центрировать содержимое по вертикали»
  • Вертикальное выравнивание:все,что вам нужно знать.

CSS

  • Синтаксис определения значения

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

  • var()

    CSS-функцию var() можно использовать для вставки значения пользовательского свойства (иногда называемого переменной») вместо любой другой части. Функция var() не может быть

  • visibility

    Свойство visibility CSS показывает или скрывает элемент без изменения макета документа.

  • Визуальная модель форматирования

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

  • 1
  • …
  • 844
  • 845
  • 846
  • 847
  • 848
  • …
  • 857
  • Next

Как центрировать текст и элементы HTML по вертикали с помощью CSS

Центрировать что-либо по вертикали в CSS не так просто, как вы думаете, и пока у нас не появились такие инструменты, как flexbox , это было действительно сложно. К счастью, вертикально центрировать что-либо внутри контейнера теперь довольно просто. Давайте посмотрим, как это сделать.

Вертикальное центрирование элемента в CSS

Предположим, у нас есть простой HTML с div с именем

.item внутри контейнера с именем #контейнер . Наш HTML выглядит так:

 

    <дел>
        Привет

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

Чтобы исправить это и отцентрировать наш .item div, содержащий текст «Hello», нам нужно сделать #container флексбоксом. Чтобы просто центрировать flexbox по вертикали, нам нужно всего лишь обновить CSS нашего контейнера, чтобы он выглядел так:

 #контейнер {
    дисплей: гибкий;
    выравнивание элементов: по центру;
}

В результате получается такой результат:

Если мы хотим, чтобы он был центрирован как по вертикали, так и по центру по горизонтали, тогда мы должны обновить наш #container CSS, чтобы он выглядел следующим образом:

 #container {
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: по центру;
}

Результат:

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

Центрирование элемента по центру экрана с помощью CSS.

Это прекрасно работает, если мы хотим центрировать что-то внутри элемента div, но что, если мы хотим центрировать что-то точно по центру экрана пользователя? Если мы хотим центрировать что-то по центру экрана пользователя с помощью CSS, мы все еще можем использовать flexbox , нам просто нужно настроить ширину контейнера. На этот раз мы сделаем #container шириной 100vw и высотой .100вх .

Эти два модуля сообщают браузеру, что #container ширина и высота должны соответствовать полной ширине и высоте окна просмотра. Мы все еще можем сохранить тот же HTML:

 

    <дел>
        Привет

Однако наш CSS для элемента #container теперь будет скорректирован, чтобы добавить эту новую ширину и высоту. Я также добавил box-sizing: border-box , чтобы #container не переполнялся и не вызывал появления полос прокрутки:

 #контейнер {
    box-sizing: граница-коробка;
    ширина: 100vw;
    высота: 100вх;
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: по центру;
}

Опять же, демонстрацию этого примера можно найти на codepen здесь.

Заключение

Центрирование элементов в CSS очень просто с помощью flexbox. Если вы хотите узнать больше о CSS, я создал интерактивное руководство по flexbox. Это не только позволяет очень легко центрировать элементы, но и показывает, как работают различные свойства flexbox.

Если вам нужно больше CSS-контента, вы можете найти его здесь.

Последнее обновление 1656860834504

Как центрировать div (по вертикали и горизонтали, IE8+)

«Как центрировать div» (внутри другого div или внутри самого тела) — один из самых обсуждаемых вопросов, и, на мой взгляд, Удивительно, но есть множество руководств, которые полностью усложняют эту проблему, обычно также с множеством недостатков, таких как фиксированная высота и ширина блока содержимого. Тем не менее, есть простой, не хакерский, чистый, готовый к отклику и безопасный для разных браузеров метод, который также не требует каких-либо настроек div с фиксированным размером пикселя:

  1. Полностью кроссбраузерный. Работает во всех браузерах (IE8 и выше).
  2. Полностью жидкий, размер div не нужен
  3. Полностью чистый, без странных хаков. Весь код используется так, как он должен использоваться.

 

Метод 1:


Центрировать элемент div посередине области просмотра

CSS 

 html, body {
    маржа: 0;
    заполнение: 0;
    ширина: 100%;
    высота: 100%;
    дисплей: таблица;
}
.контейнер {
    отображение: таблица-ячейка;
    выравнивание текста: по центру;
    вертикальное выравнивание: посередине;
}
.содержание {
    цвет фона: красный; /* только для демонстрации */
    отображение: встроенный блок;
    выравнивание текста: по левому краю;
}

HTML 

 

    <дел>
        контент контент контент
        

        оооооооооооооооооооочень контент
        

        другой контент

Result

См. JSFiddle здесь: http://jsfiddle.net/panique/pqDQB/35/

 

Метод 2:


div по центру внутри другого div по вертикали и горизонтали0007

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

CSS 

 .родительский {
    дисплей: таблица;
    /* необязательно, только для демонстрации */
    высота: 300 пикселей;
    фон: желтый;
}
.ребенок {
    отображение: таблица-ячейка;
    вертикальное выравнивание: посередине;
    /* необязательно, только для демонстрации */
    фон: красный;
}
.содержание {
    /* необязательно, только для демонстрации */
    фон: синий;
}

HTML

Результат

См.