Как выровнять блок по вертикали css: Все способы вертикального выравнивания в CSS / Хабр

html — Выравнивание по вертикали с использованием :before

Вопрос задан 9 лет 4 месяца назад

Изменён 9 лет 4 месяца назад

Просмотрен 7k раз

Господа верстальщики нашел метод выравнивания блока с неизвестной высотой по вертикали. Все отлично работает, но не могу разобраться как, кто нибудь может объяснить максимально «разжевано» и просто… КАК ЭТО РАБОТАЕТ? Сломал голову, гуглил, вот пример:

Код:

body, html {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
section {
    text-align: center;
    width: 100%;
    height: 100%;
}
section:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
article {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
<section>
    <article>Yeah!</article>
</section>

Фидл: http://jsfiddle. net/9Vyqv/

P.S. Насколько я знаю, vertical-align работает только с display: table, table-cell, а тут прям магия какая-то. Спасибо.

• html
• css

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

vertical-align: middle задает вертикальное выравнивания по центру. Меньший по высоте блок будет вертикально по центру большего. Опять же упрощая, если провести линию через центр одного inline блока тока она пройдет и через центр другого.

Таким образом мы можем сделать один блок равный высоте родителя и задать vertical-align: middle (для задания высоты мы сделаем его inline-block). Тогда меньший станет вертикально по центру большего, а поскольку больший равен по высоте родителя, то меньший вертикально выравняется по центру родителя тоже.

Псевдо-элемент помещается внутрь элемента. Т.е. получается так:

<section>
    <section:before></section:before>
    <article>Yeah!</article>
</section>

вот ему и задается высота равная высоте родителя, article в данном случае это меньший блок.

1

http://htmlbook.ru/css/vertical-align

ни слова про ограничения к vertical-align.

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как выровнять текстовые элементы по вертикали в CSS — последнее руководство, которое вам когда-либо понадобится — Блог Terresquall

Из всех атрибутов CSS, доступных веб-разработчикам, атрибут вертикального выравнивания

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

 <дел>
Элемент должен располагаться по центру по вертикали
 

Элемент, центрируемый по вертикали

Причина, по которой vertical-align не работает в приведенном выше примере, заключается в том, что, как и атрибут text-align , он не работает с элементами блочного уровня (элементы с display:block ). Однако, в отличие от атрибута text-align , помимо работы с встроенными элементами и встроенными блоками , атрибут vertical-align также работает с элементами таблицы , хотя и по-другому.

В этой статье

мы будем изучать только то, как атрибут vertical-align взаимодействует с элементами inline и inline-block . Если вы хотите использовать вертикальное выравнивание для выравнивания невстроенных элементов, вам нужно нажать на вышеупомянутую ссылку.

1. Возможно выравнивание по вертикали позиции
   1. выравнивание по вертикали: базовая линия
   2. выравнивание по вертикали: сверху / снизу / посередине
   3. Вертикальный арест: текстовый-Top / Text-Bottom
   4. Вертикальный альбом: Sub / Super

Дополнительная информация

1. Что такое line-height ?
2. Подробнее о vertical-align: baseline
3. Выравнивание элементов
   с помощью

   vertical-align

Заключение

1. Возможные

выравнивания по вертикали позиции

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

а. vertical-align: baseline

По умолчанию (т. е. если атрибут vertical-align не установлен для встроенных или встроенных блочных элементов), все встроенные и встроенные блочные элементы будут вертикально выровнены по базовый уровень их родителя; но что такое базис?

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

 
базовый текст
 

базовый текст.

---

Статья продолжается после объявления:

---

b.

vertical-align: top/bottom/mid

Чтобы сместить положение inline и inline-block элементов относительно друг друга, мы можем применить к ним атрибуты top , bottom или middle . В приведенных ниже примерах синяя линия показывает, где находится выравнивание для вертикально выровненного элемента .

Обратите внимание, что при работе с атрибутом вертикального выравнивания (как в примерах, показанных ниже) мы обычно применяем атрибут CSS к самому высокому элементу в строке. Вы можете пренебречь этим правилом, но это может привести к странному поведению выравнивания, которое мы рассмотрим позже в этой статье.

вертикальное выравнивание: сверху

 
вертикальное выравнивание: сверху
 

вертикальное выравнивание: сверху

выравнивание по вертикали: по низу

 
выравнивание по вертикали: по низу
 

выравнивание по вертикали: по низу

по вертикали -выравнивание: посередине

 
 com/100/100"/>вертикальное выравнивание: посередине
 

вертикальное выравнивание: посередине

c.

vertical-align: text-top / text-bottom

Они ведут себя аналогично top , bottom и middle , за исключением того, что они не учитывают line-height при выравнивании себя, в отличие от атрибутов top и bottom , которые учитывают. В приведенных ниже примерах line-height текстовых элементов были установлены на 36px и обозначены оранжевой строкой:

vertical-align: text-top

 
< img src="https://placekitten.com/100/100"/>vertical-align: text-top
 

вертикальное выравнивание: text-top

 

 
vertical-align: top
 

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

 

вертикальное выравнивание: текст по нижнему краю

 
 com/100/100"/>вертикальное выравнивание: текст по нижнему краю
 

вертикальное выравнивание: text-bottom

 

 
vertical-align: bottom
 

вертикальное выравнивание: по нижнему краю

 

d.

vertical-align: sub / super

Эти 2 значения vertical-align будут выравнивать элемент по позициям нижнего или верхнего индекса соседнего текста. В HTML можно использовать и для записи подстрочного и надстрочного текста соответственно.

Индексы

 
Карбонат натрия представляет собой Na2Cl3.
 

Карбонат натрия Na ₂ Cl ₃ .

Надстрочные индексы

 
z2 = x2 + y2
 

z ² = x ² + y ²

Когда для vertical-align установлено значение sub или super , элемент таким образом выравнивается по базовой линии, по которой будет располагаться текст нижнего или верхнего индекса.

выравнивание по вертикали: sub

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

вертикальное выравнивание: _{подчиненное}

вертикальное выравнивание: супер

 
вертикальное выравнивание: супер
 

вертикальное- align: ^super

---

Статья продолжается после объявления:

---

2. Смещение постоянного значения для

vertical-align

Вместо того, чтобы вводить текстовое значение для установки атрибута vertical-align , вы также можете указать либо значение длины (например, em , пикселей и т. п.), либо процентное значение стоимость.

а. Значения длины

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

Смещение для этих значений всегда будет относительно базовой линии, , так как нет возможности установить как текстовую позицию, так и числовое смещение.

Вы можете использовать любые единицы, которые обычно используются в CSS, такие как em , px , rem и т. д. Ниже приведены некоторые примеры использования единиц em и px .

Положительное значение смещения

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

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

2em пробел

Отрицательное значение смещения

 
 вертикальное выравнивание -20px
 

вертикальное выравнивание -20px

20px пробел

b.

Процентные значения

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

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

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

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

 

 

Обратите внимание, что линия высота приведенного выше примера наследуется от родителя

тег. Все элементы внутри будут автоматически иметь высоту строки 2em , то есть 200% размера шрифта абзаца.

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

а. Что такое

высота строки ?

line-height — атрибут CSS, который относительно важен для некоторых значений вертикального выравнивания . Поэтому важно знать, что это такое. Проще говоря, line-height определяет количество места, которое занимает строка текста.

 
Этот текст имеет высоту строки 1em, или 100% размера шрифта. Это означает, что текст относительно плотно упакован, между строками мало места.
 

Этот текст имеет высоту строки 1em, или 100% размера шрифта. Это означает, что текст относительно плотно упакован, между строками мало места.

 
Этот текст имеет высоту строки 1em, или 100% размера шрифта. Это означает, что текст относительно плотно упакован, между строками мало места.
 

Этот текст имеет высоту строки 2em, или 100% размера шрифта. Это означает, что между двумя строками текста есть интервал, равный 100% размера шрифта.

б. Подробнее о

vertical-align: baseline

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

 
 Обычный текст. Более крупный текст.
Это еще одна строка с базовой линией, отличной от первой строки.
 

Обычный текст. Крупный текст.
Еще одна строка с базовой линией, отличной от первой строки.

---

Статья продолжается после объявления:

---

c. Выравнивание

элементов с vertical-align

Атрибут vertical-align можно очень эффективно использовать для выравнивания горизонтально расположенных форм, поскольку такие элементы формы, как флажки, текстовые поля и тому подобное, являются встроенными элементами, которые можно выравнивать по вертикали. См. пример ниже:

 <форма>
Ярлык флажка: 
 

Метка флажка:

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

 <форма>
Ярлык флажка: 
 

Метка флажка:

Существует множество других применений использования vertical-align на элементах для вертикального выравнивания и организации форм. Если вам нужна статья для дальнейшего изучения этого вопроса, сообщите нам об этом в комментариях ниже!

Заключение

В следующей статье мы рассмотрим, как можно использовать vertical-align для вертикального выравнивания наших элементов (а не только текста). Кроме того, мы также будем изучать, как мы можем использовать другие конструкции HTML и CSS (помимо vertical-align ) для центрирования наших элементов.

Вы пытаетесь заставить вертикальное выравнивание работать так, как вам нужно? Поскольку вертикальное выравнивание — это атрибут, который имеет много сложных взаимодействий и множество вариантов использования, мы ищем тематические исследования, чтобы написать больше статей об этом атрибуте. Следовательно, если у вас есть вопрос относительно vertical-align , оставьте его нам в комментариях ниже! Если это что-то, что мы не рассмотрели в наших статьях, мы сделаем это, чтобы ответить на ваш вопрос.

Отдельное спасибо сайту placekittens.com за изображения котят в этом посте! При создании этого изделия не пострадал ни один котенок.

Вертикальное центрирование с помощью CSS | Объяснение CSS, JavaScript и XHTML

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

Существует несколько способов центрирования по вертикали. С точки зрения элементов блочного уровня, методы причудливы. Встроенные элементы гораздо проще центрировать:

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

Примечание. Если вам нужна поддержка свойства css

vertical-align , ознакомьтесь с таблицей свойств CSS, значений и поддержки браузера.

HTML, используемый в наших примерах:

 

  <дел>
     
Это предложение будет меняться в каждом примере
 
 

 #contentBlock {display: block; высота: 200 пикселей;}
#содержащийблок div {height:50px; margin: 75px 0;} 

 #contentBlock {display: table; высота: 200 пикселей; положение: родственник; переполнение: скрыто;}
#contentBlock div {display: table-cell; вертикальное выравнивание: посередине;}
 

 #contentBlock {height: 200px; положение: родственник; переполнение: скрыто;}
#contentBlock div { position: absolute; сверху: 50%;}
#содержащийблок div p {позиция: относительная; сверху: -50%;} 

#содержащийблок {дисплей:таблица; высота: 200 пикселей; положение: родственник; переполнение: скрыто; }
#contentBlock div {*position: absolute; верх: 50%; отображение: таблица-ячейка; вертикальное выравнивание: посередине;}
#contentBlock p {*position: relative; сверху: -50%;}