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

Как выровнять текст в css по вертикали

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

Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.

Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.

Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.

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

Для блочных элементов свойство vertical-align не работает.

Есть два способа, как можно выйти из этой ситуации:

Для тех, кто предпочитает все смотреть в видео:

Для тех, кто любит текст, читайте ниже способ решения этой проблемы.

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

Способ Б. Использовать своство display:table-cell;

Одна проблема, это свойство не поддерживают Internet Explorer 6-7 версии.

Ситуация 1. Выравнивание одной строки текста.

Рассмотрим простой пример.

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

Этот способ хорошо работает, когда у вас всего одна строка с текстом.

Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.

Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.

Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.

Есть еще более современное решение этой проблемы — использование flexbox.

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

Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.

Свойство CSS vertical-align

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

Где value может принимать следующие значения:

• baseline — выравнивание по базовой линии предка (или просто нижняя граница родителя)
• bottom — выравнивание по нижней части строки (или элемента, который располагается ниже всех)
• middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
• sub — отображение происходит под строкой (выглядит как подстрочный индекс)
• super — отображение происходит над строкой (как верхний индекс)
• text-bottom — выравнивание нижней границы элемента по нижнему краю строки
• text-top — выравнивание верхняя границы элемента по верхнему краю строки
• top — выравнивание верхняя края элемента по верху самого высокого элемента строки
• inherit — наследует значение родителя
• значение — указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
• проценты — указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

• baseline (для строчных элементов)
• middle (для ячеек таблицы)

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

Чаще всего vertical-align используется в ячейках таблиц. В теге <table> используют атрибут valign .

Синтаксис CSS valign для таблиц

Где value может принимать следующие значения:

• baseline — выравнивание по базовой линии первой текстовой строки
• bottom — выравнивание по нижнему краю ячейки таблицы
• middle — выравнивание по середине ячейки
• top — выравнивание верхнему краю ячейки

Преобразуется на странице в следующее:

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы «X» (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

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

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

Свойство vertical-align

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

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

Второе значение – sub. Его ориентир – нижняя базовая линия родительского элемента. Например, так.

Противоположное sub выравнивание super. Ориентиром служит верхняя базовая линия родительского элемента.

Оба эти значения в таблицах аналогичны baseline.
Совершенно другая ситуация с выравниванием middle. Это значение css позволяет выровнять текст по центру. Здесь ориентиром служит середина родительского элемента. Вычисляется она очень просто: берется его размер по вертикали и делится пополам. Через центр проводится линия, по которой и выравнивается элемент.
В случае с таблицами элемент выравнивается по середине ячейки без границ.

Еще одна пара значений – top-bottom. Они выравнивают элемент по верхней и нижней линии строки соответственно. Ну или ячейки, если речь идет о таблице.
Также можно указывать размещение элемента по горизонтали в процентах или непосредственном значении в единицах, поддерживаемых CSS (пикселях, сантиментрах, em и так далее). В этом случае браузер ориентируется на базовую линию родительского элемента. В таблицах код себя ведет так же, как если верстальщик укажет baseline в качестве значения.

Возможные проблемы

Предположим, мы хотим нарисовать с помощью HTML и CSS такой рисунок.

С точки зрения HTML необходимо создать два div элемента. Присвоим внешнему родительскому элементу класс outer, а внутреннему – inner. В качестве примера приведем ситуацию, когда мы знаем заранее размеры каждого блока.
Необходимо прописать такой css-код.

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

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

Использование таблицы для выравнивания текста по вертикали в CSS

В отличие от инлайн-блоков, выравнивание ячейки таблицы позволяет переместить и ее содержимое. Сделать это можно просто средствами HTML.

Недостатков у такого подхода два:

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

Исправить первый недостаток можно, изменив теги table и td на div и использовать режим отображения «table» и «table-cell» соответственно.

Но вот второй недостаток все равно останется. Код будет немного тяжеловат, особенно если таких элементов много.

Отступы

Можно выровнять внутренний див по центру с помощью вертикальных отступов. Недостаток метода – необходимо точно знать высоту обоих блоков. Величина отступа вычисляется по формуле (высота внешнего блока – высота внутреннего блока)/2. Пример кода.

Line-height

С помощью этого свойства также можно выравнивать элементы по вертикали. Важно, чтобы в инлайн-блоке было не больше одной строчки текста. Это основной недостаток метода. Если эти правила соблюдены, необходимо приравнять line-height к высоте внешнего дива.
Поскольку нельзя допускать, чтобы образовывалось больше одной строчки, рекомендуется добавить к коду правила white-space: nowrap и overflow: hidden.
Код будет выглядеть следующим образом.

Еще один недостаток этого способа исправить проблему – необходимость знать высоту внешнего блока.

Растягивание

Этот метод можно использовать, если известна высота только внутреннего блока. Сначала необходимо выставить абсолютное позиционирование для него, а для внешнего – относительное. Для внутреннего блока также устанавливаются правила top: 0 и bottom: 0, чтобы расширить его по всей высоте внешнего блока.
После этого выставляется значение вертикальных отступов внутреннего блока на auto. Код выглядит следующим образом.

Отрицательный margin-top

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

1. Внутренний блок опускается вниз на половину высоту внешнего.
2. После этого он поднимается вверх на половину своей высоты.

Технически метод реализуется следующим образом.

Свойство transform

В отличие от предыдущего метода, здесь не требуется знать высоту внутреннего блока. Во всем остальном способ такой же самый, просто вместо margin-top: -50px пишется transform: translateY(-50%).
Возникает вопрос: почему в прошлом способе нельзя было сдвинуть объект вверх на определенное количество процентов. Причина кроется в том, что margin-top высчитывает процент от родителя, в то время как transform позволяет сдвинуть объект на определенный процент от своей высоты.
Недостаток метода в плохой поддержке старых версий браузеров.

Выравнивание с помощью Flexbox

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

Этот способ идеален, если основная аудитория сайта пользуется современными браузерами.

Как выровнять текст или блок по вертикали?

Автор: Администратор

07.08.2015

Просмотров: 3385

Теги:
css,
vertical,
align

В этой статье мы расскажем о том, как выровнять текст, div, картинку и так далее по вертикали, используя CSS.

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

Если речь и идет о ячейках таблицы то там всё сводится к написанию свойства vertical-align, с необходимым значением.

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

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

Пример

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<div>
		<div>Какой то текст в другом блоке(div)</div>
	</div>
	<div>
		<img src="/images/smile.png" alt="smile" /><br>текст и картинка перед ним
	</div>
	<div>
		обычный текст
	</div>
</body>
</html>

div.one {
	vertical-align:middle;
	display:table-cell;
	/* доп свойства */
	height:400px;
	width:200px;
	background:#00FF66;
	text-align:center;
}

	div.one div {
		background:#CC6600;
	}

Результат вы сможете увидеть на демо-странице: 

css — CSS: вертикальное выравнивание встроенного блочного элемента в строке текста

У меня есть элемент встроенного блока, помещенный внутри строки текста:

В элементе .icon есть vertical-align: middle;, в результате получается вот такое изображение:

Как видите, значок не выровнен по середине текста, он немного ниже, при этом выравнивание текста выглядит нормально. .button-content имеет line-height, равное высоте родителя. Я попытался обернуть текстовые элементы вокруг значка:

И получил этот результат:

Монета немного поднялась относительно текста, тогда как вся строка опустилась на пиксель-два вниз.

Как правильно выровнять элемент встроенного блока внутри строки текста? А что это за фрагменты текста и как они себя ведут? У них есть display:inline; или что-то в этом роде, потому что я не вижу их свойств в DevTools?

1

Cubius

17 Ноя 2016 в 16:14

4 ответа

Лучший ответ

Вертикальное выравнивание работает не так, как вы думаете. Он используется в таблицах HTML, но не работает в div. Некоторое время это было болью. К счастью, в настоящее время этого легко добиться с помощью flexbox.

Для этого оберните два бита копии в отдельные элементы span, чтобы ваша структура выглядела так:

<div>
    <span>buy for</span>
    <div></div>
    <span>1000</span>
</div>

Тогда ваш css должен выглядеть так:

.button-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 130px;
}

Или, если вы не можете поддерживать flexbox, ваш .button-content может быть установлен на display: table-cell;, и vertical-align: middle; должен работать.

Я настоятельно рекомендую flexbox.

2

elmarko
17 Ноя 2016 в 13:34

Если элементы span не стилизованы, результат будет одинаковым с ними или без них.

С vertical-align: middle; position: relative; top: -1px; вы можете получить хорошие результаты.

.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: blue
}
.top {
  vertical-align: top;
}
.bottom {
  vertical-align: bottom;
}
.middle {
  vertical-align: middle;
}
.moveup {
  position: relative;
  top: -1px;
}

<div>
  <span>Buy for</span>
  <div></div>
  <span>1000</span>
</div>

<div>
  Buy for
  <div></div>
  1000
</div>

<hr>

<div>
  Buy for
  <div></div>
  1000 vertical-align: top;
</div>

<div>
  Buy for
  <div></div>
  1000 vertical-align: bottom;
</div>

<div>
  Buy for
  <div></div>
  1000 vertical-align: middle;
</div>

<hr>

<div>
  Buy for
  <div></div>
  1000 vertical-align: middle; top: -1px;
</div>

1

rafaelcastrocouto
17 Ноя 2016 в 13:34

Простой ответ

Я еще не видел простого ответа, поэтому просто отправлю свой:

.icon_tpye-gold {
  vertical-align: -5px; /* << or another value to center the inline element vertically */
}

Предложение: согласовываться с именами классов (чтобы icon_type-gold было понятнее, когда названо icon_type_gold или icon-type-gold, это выглядит менее небрежно)

1

Derk Jan Speelman
17 Ноя 2016 в 13:54

Значок на самом деле выровнен по вертикали, но относится к полной высоте строки, включая пространство под базовой линией, зарезервированное для нижних элементов символов, таких как y, g, p и т. Д. (также y в тексте вашей кнопки) Вы можете попробовать добавить position: relative; и bottom: 3px; (попробуйте разные значения) к этому встроенному блоку, чтобы переместить его вверх.

1

Johannes
17 Ноя 2016 в 14:20

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

В этой статье мы узнаем, как выровнять текст по вертикали с помощью CSS, и увидим его реализацию на примере. Хотя CSS2 не поддерживает вертикальное выравнивание. Но мы можем выровнять центральные блоки по вертикали, объединив несколько свойств. Уловка состоит в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть центрировано по вертикали. Мы будем использовать свойство vertical-align, которое определяет вертикальное выравнивание табличного поля или встроенного элемента.

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

 DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...
DIV {
  Гики
} 

Пример: В этом примере описывается использование свойства vertical-align вместе со свойством display в качестве ячейки таблицы.

HTML

Вывод:

Существует более универсальный подход, который определяет другой способ выравнивания текста по вертикали.Это решение будет работать для одной строки и нескольких строк текста, но по-прежнему требует контейнера фиксированной высоты.

 div {
  высота: 200 пикселей;
  высота строки: 200 пикселей;
  выравнивание текста: центр;
  граница: 2px пунктирная # f69c55;
}
охватывать {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  высота строки: нормальный;
} 

CSS просто определяет размер div, выравнивает по вертикали по центру диапазон, устанавливая высоту строки элемента div, равную его высоте, и делает диапазон встроенным блоком с vertical-align: middle.Затем он устанавливает нормальную высоту строки для диапазона, поэтому его содержимое естественным образом перетекает внутрь блока.

Пример: В этом примере описывается выравнивание содержимого по вертикали с фиксированной высотой контейнера.

HTML

Вывод:

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

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

1. Используйте свойство line-height для выравнивания текста по вертикали в CSS
2. Используйте диапазон внутри div По высоте строки Свойство для выравнивания текста по вертикали в CSS
3. Используйте flexbox для вертикального выравнивания текста в CSS

Мы представим три метода вертикального выравнивания текста в CSS.

Используйте свойство

line-height для вертикального выравнивания текста в CSS

Если у нас есть однострочный текст, мы можем использовать свойство line-height для выравнивания текста по вертикали в пределах div . Свойство line-height CSS устанавливает высоту строки. Он используется для установки расстояния между строками текста. Однако мы также можем использовать его для выравнивания нашего однострочного текста по вертикали. Этот метод не сработает, если текст имеет разрывы строк или состоит более чем из одной строки.Мы можем присвоить line-height любое значение в соответствии с нашими требованиями относительно того, где мы хотим выровнять текст по вертикали.

Например, создайте div и напишите внутри него однострочный текст. Давайте дадим div имя класса center . Напишите однострочный текст Выровненный по вертикали внутри div . Присвойте div высоту , , , 100 пикселей, и высоту строки , , , 100 пикселей, , чтобы вертикально выровнять текст по центру div.Наконец, дайте div границу из 1px сплошной черный цвет , чтобы увидеть вертикальное выравнивание.

В приведенном ниже примере показано, что текст выровнен вертикально по центру div , содержащего по высоте из 100 пикселей и границу из 1 пиксель сплошной черный с использованием свойства CSS line-height .

Пример кода:

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

 .center {
высота: 100 пикселей;
высота строки: 100 пикселей;
граница: сплошной черный 1px;
}
  

Использовать диапазон

Внутри div Наряду со свойством line-height для выравнивания текста по вертикали в CSS

Мы также можем выровнять несколько строк по вертикали, используя свойство line-height . Мы можем разместить тег span внутри тега div и поместить несколько строк внутри тега span . Мы можем использовать тег br , чтобы разбить строку и сделать ее многострочным текстом.Затем мы можем использовать свойство line-height для div и span . Мы также будем использовать свойство CSS display: inline-block для тега span , чтобы объединить несколько строк кода вместе. Поэтому мы также должны использовать свойство CSS line-height внутри span для отделения многострочного текста друг от друга.

Например, создайте div , а затем span внутри div .Напишите несколько строк текста внутри этого span с помощью тега br . В CSS выберите div и задайте высоту 100px и установите line-height на 100px . Установите границу div 1px сплошной черный , чтобы увидеть выравнивание. Установите для свойства display тега span значение inline-block , чтобы объединить несколько строк текста вместе. Задайте высоту строки от до от 20 пикселей до диапазона , чтобы образовался промежуток между несколькими строками текста.Удерживайте с выравниванием по вертикали с по по центру , чтобы текст размещался вертикально точно посередине.

В приведенном ниже примере показано вертикальное выравнивание нескольких строк текста в блоке div с помощью свойства line-height и display: inline-block .

Пример кода:

  

 
 Многострочный 
 
 код
 

  

  div {
 высота: 100 пикселей;
 высота строки: 100 пикселей;
 граница: сплошной черный 1px
}
охватывать {
 дисплей: встроенный блок;
 вертикальное выравнивание: по центру;
 высота строки: 20 пикселей;
}
  

Используйте

flexbox для выравнивания текста по вертикали в CSS

Мы также можем использовать flexbox для выравнивания текста в пределах div по вертикали или горизонтали.Мы можем использовать flexbox , установив для свойства display значение flex . После установки свойства display на flex , мы можем использовать свойство align-items и поместить его значение как center для выравнивания текста по вертикали в пределах div . Мы можем использовать свойство justify-content и установить для него значение center , чтобы центрировать текст в пределах div по горизонтали. Флексбоксы очень просты в использовании и к тому же очень эффективны.

Например, создайте div и напишите внутри него одну или несколько строк текста. Используйте тег br , чтобы сделать несколько строк текста. Задайте высоту 100px для блока div . Установите границу как 1 пиксель, сплошной черный цвет , чтобы увидеть выравнивание. Поместите значение свойства display как flex , чтобы использовать flexbox . Затем установите align-items на center , чтобы выровнять текст по вертикали в пределах div по центру.Мы также можем выровнять текст по горизонтали, поместив значение justify-content в центр .

Таким образом, мы можем использовать flexbox для выравнивания текста по горизонтали и вертикали в CSS.

Пример кода:

  

 Выровнять 
 текст по 
 центру

  

  div {
 высота: 100 пикселей;
 граница: сплошной черный 1px;
 дисплей: гибкий;
 align-items: center;
 justify-content: center;
}
  

Внести вклад

DelftStack - это коллективный проект, созданный такими компьютерными фанатами, как вы.Если вам понравилась статья и вы хотите внести свой вклад в DelftStack, написав платные статьи, вы можете проверить страницу напишите для нас.

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

Фотография на обложке: Alex Wong.

Это начало долгого пути, чтобы узнать, как добиться, чтобы вещи, наконец, окончательно выровнялись на наших веб-страницах.

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

Назначение выравнивания текста - выравнивание текста по горизонтали . Поиграйте с этим:

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

В ближайшее время появятся и другие параметры - например, начало и конец , которые зависят от направления текста, выравнивание с помощью определенного символа (например, десятичного числа), и justify-all , которое заставляет последнюю строку текста для выравнивания.На дату создания (август 2019 г.) они сильно различаются по поддержке, так как в настоящее время они все еще являются черновиками редакции с точки зрения спецификации - поэтому обязательно проверьте таблицы совместимости, прежде чем использовать что-либо необычное.

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

Как вы могли догадаться по названию, цель vertical-align - выровнять текст по вертикали . В приведенном ниже примере я выделил несколько ключевых фраз, связанных с растениями; кнопки переключают свойство вертикального выравнивания этих выделений.

Если вы применяете вертикальное выравнивание к элементам display: inline или display: inline-block , то вы сможете выровнять их друг с другом. Вы можете выровнять все, что может течь по горизонтали, если для него задано допустимое свойство отображения. Текст, изображения, значки, кнопки, входы ...

При использовании

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

Вертикальное выравнивание также работает с таблицами (а также с элементами с отображением, установленным в table-cell). Вот примерная таблица, с которой можно поиграть:

Важное примечание:

⚠️ Выравнивание по вертикали не выравнивает элементы блока. ⚠️

Итак, если вы думаете ... «подождите, у меня не сработало вертикальное выравнивание! Почему вы врете?», Посмотрите на свойство display вашего элемента. Vertical-align - это не универсальный способ выровнять все. Поскольку элементы уровня блока не могут иметь родственника в потоке на той же строке, что и они, они не будут выровнены.Однако у блочных элементов могут быть дочерние элементы, унаследовавшие их свойство vertical-align; это не совсем недействительно, просто бесполезно для позиционирования.

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

tl; dr

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

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

Бонус по вертикали: высокое привидение 👻

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

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

У нас:

• Внешний контейнер больше внутреннего
• Внутренний контейнер, который мы хотим центрировать по вертикали
• Невидимый контейнер "высокого призрака", который только помогает при выравнивании

Важные биты:

• Высокий призрак и внутренний контейнер - , оба display: inline-block and vertical-align: middle
• Рост призрака - 100% (вот почему он высокий!)
• Высокое привидение имеет нулевую ширину, чтобы убедиться, что он не нарушает выравнивание (он невидим)

Невидимый выравнивающий элемент установлен как как высота его родительского элемента с высотой : 100% , поэтому все, что выровнено по вертикали с «высоким призраком», произойдет для выравнивания с элементом родительского блока.Два элемента внутри контейнера являются строчно-блочными, поэтому они доступны для вертикального выравнивания друг с другом. Для них обоих установлено значение vertical-align: middle . Итак, внутренний контейнер, который мы хотим выровнять (кот), находится посередине.

Теперь этот код немного запутан, поэтому мы можем очистить его, используя псевдоэлементы:

Есть еще пара небольших заметок:

• Атрибут содержимого , содержащий пробел, нужен только для того, чтобы убедиться, что элемент может отображаться во всех браузерах.
• Хотя в этом примере ширина и высота заданы явно, это необязательно; пока внутреннее содержимое не выходит за пределы родительского, этот трюк будет работать, поскольку он основан на процентах.
• Кот расположен по центру по горизонтали с text-align: center , потому что я думаю, что это выглядит хорошо. Это необязательно.

Что-нибудь еще вы хотели бы знать об этих свойствах? Есть запросы на следующую запись в серии? У меня запланировано лота ... Оказывается, в CSS есть много способов выровнять материал. (Почему ни один из них никогда не работал? 🤔)

Все, что вам нужно знать (CSS)

   

    
      Нам нужно
       
      говорить
       
      об этом!
    
   
 

Ага, давайте поговорим о свойстве CSS vertical-align . Предполагаемое использование - выравнивание текста и элементов рядом друг с другом. Например, центрирование значка рядом с фрагментом текста.

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

Итак, чтобы свести к минимуму проблемы в будущем, я пробрался через спецификации CSS W3C, чтобы прояснить поведение vertical-align раз и навсегда .

Давайте разберемся с правилами игры!

О чем вы узнаете из этой статьи:

1. Действия по вертикальному выравниванию на встроенных элементах в строковом блоке.⬀
2. Встроенные элементы и линейные блоки имеют базовые, верхние и нижние линии. ⬀
3. Вертикальное выравнивание: выравнивание базовых линий, вершин и низов. ⬀
4. Пример: как центрировать значок рядом с фрагментом текста. ⬀
5. Пример: Как может двигаться базовая линия. ⬀
6. Пример: Как центрировать элементы по вертикали без зазора внизу. ⬀
7. Пример: Как убрать зазор между двумя выровненными элементами.⬀

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

vertical-align используется для выравнивания элементов inline-level. Это элементы, у которых свойство display оценивается как

.

• рядный,
• встроенный блок или
• inline-table (в этой статье не рассматривается).

Встроенные элементы - это, по сути, теги, обертывающие текст.

Элементы встроенного блока - это то, что предполагает их название: элементы блока, живущие в строке. Они могут иметь ширину и высоту (возможно, определяемые его собственным содержимым), а также отступы, границу и поля.

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

   

      Вообще
     
    в строке текста. 
 A короткий
     
    в строке текста. 

      Этот
       
      может
       
      случаться.
    
   
 

Линейные прямоугольники очерчивают поле, на котором мы играем. Внутри этих рамок свойство vertical-align отвечает за выравнивание отдельных элементов. Итак, в отношении чего выравниваются элементы?

О базовых линиях, вершинах и низах

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

Встроенный элемент

Здесь вы видите три строки текста рядом друг с другом.Верхний и нижний край высоты строки обозначен красными линиями, высота шрифта - зелеными линиями, а базовая линия - синей линией. Слева текст имеет высоту строки, равную той же высоте , что и размер шрифта. Зеленая и красная линии сворачивались в одну линию с каждой стороны. В середине высота строки , вдвое больше , чем размер шрифта. Справа высота строки - половина размера шрифта.

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

Базовая линия встроенного элемента - это строка, символы расположены на . Это синяя линия на рисунке. Грубо говоря, базовая линия где-то ниже середины высоты шрифта . Взгляните на спецификации W3C для подробного определения.

Элемент встроенного блока

Слева направо вы видите: элемент встроенного блока с содержимым в потоке («c»), элемент встроенного блока с содержимым потока и переполнение : скрыто и элемент встроенного блока с нет. текущего содержимого (но область содержимого имеет высоту).Границы поля обозначены красными линиями, граница - желтой, отступ - зеленым, а область содержимого - синим. Базовая линия каждого встроенного блочного элемента показана синей линией.

Внешние края элемента Inline-block являются верхним и нижним краями его поля поля. Это красные линии на рисунке.

Базовая линия элемента Inline-block зависит от того, имеет ли элемент входящее содержимое:

• В случае содержимого в потоке базовая линия элемента inline-block является базовой линией последнего элемента содержимого в нормальном потоке (пример слева).Для этого последнего элемента его базовая линия находится в соответствии с его собственными правилами.
• В случае содержимого в потоке, но свойство переполнения оценивается как нечто отличное от видимого , базовой линией является нижний край поля поля (пример посередине). Таким образом, это то же самое, что и нижний край элемента inline-block.
• В случае нет содержимого в потоке базовой линией, опять же, является нижний край поля поля (пример справа).

Line Box

     

             Икс
            Этот
             
            может
             
            случаться.
        
     
 

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

Линейный блок имеет верхний край , выровненный с верхним краем самого верхнего элемента этой строки, и нижний край , выровненный с нижним краем самого нижнего элемента строки.Это поле обозначено красными линиями на рисунке выше.

Базовая линия линейного блока является переменной:

CSS 2.1 не определяет положение базовой линии линейного блока.

- Спецификации W3C

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

Поскольку базовая линия линейного блока невидима, может не сразу быть очевидно, где она находится. Но вы можете очень легко сделать это видимым. Просто добавьте символ в начале строки в вопросах, как я добавил «x» на рисунке. Если этот символ никаким образом не выровнен, он по умолчанию будет располагаться на базовой линии.

Около своей базовой линии линейное поле имеет то, что мы могли бы назвать его текстовым полем . Текстовое поле можно рассматривать просто как встроенный элемент внутри строчного поля без какого-либо выравнивания.Его высота равна font-size его родительского элемента. Таким образом, текстовое поле включает только неформатированный текст строчного поля. Поле обозначено зелеными линиями на рисунках выше. Поскольку это текстовое поле привязано к базовой линии, оно перемещается при перемещении базовой линии. (Боковое примечание: это текстовое поле называется стойкой в ​​спецификациях W3C)

Уф, это была самая сложная часть. Теперь мы знаем все, чтобы взглянуть на вещи в перспективе . Подведем итоги наиболее важных фактов:

• Есть область, которая называется , строка .Это область, в которой происходит вертикальное выравнивание. Он имеет базовую линию , текстовое поле и верхний и нижний край .
• Имеется встроенных элемента . Это объекты, которые выровнены. У них есть базовая линия и верхний и нижний край .

Вертикальное выравнивание для выравнивания базовых, верхних и нижних линий

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

Выравнивание относительно базовой линии линейного прямоугольника

    
         Икс
            исходный уровень
             суб
             супер
             -50%
             + 10 пикселей
        
    
 

• базовая линия : базовая линия элемента находится точно над базовой линией линейного блока.
• sub : базовая линия элемента смещена ниже базовой линии линейного блока.
• super : базовая линия элемента смещена над базовой линией линейного блока.
• <процент> : базовая линия элемента смещена относительно базовой линии линейного блока на процент относительно высоты строки.
• : базовая линия элемента смещена относительно базовой линии линейного блока на абсолютную длину.

Особый случай vertical-align: middle заслуживает отдельной цифры:

    
          Икс
              середина
            
        
    
 

• средний : средняя точка между верхним и нижним краями элемента выровнена по базовой линии линейного блока плюс половина x-высоты.

Выравнивание относительно текстового поля линейного поля

    
            Икс
        
              текст вверху
            
              текст внизу
            
        
    
 

Можно также перечислить эти два случая при выравнивании относительно базовой линии линейного блока, поскольку положение текстового поля определяется базовой линией.

• text-top : верхний край элемента выровнен по верхнему краю текстового поля строчного поля.
• text-bottom : нижний край элемента выровнен по нижнему краю текстового поля строчного поля.

Выравнивание относительно внешних краев линейной рамки

    
            Икс
        
              верхняя
            
              Нижний
            
        
    
 

• верх : верхний край элемента выровнен по верхнему краю линейного блока.
• нижний : нижний край элемента выровнен по нижнему краю линейного блока.

Формальное определение, конечно же, можно найти в спецификациях W3C.

Почему Vertical-Align ведет себя именно так?

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

Центрирование значка

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

  
 
По центру?


 
 По центру! 

  

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

Это проливает свет на нашу проблему.Поскольку текст слева совсем не выровнен, он находится на базовой линии. Дело в том, что выравнивая прямоугольник с vertical-align: middle , мы выравниваем его по середине строчных букв без восходящих элементов (половина x-высоты). Итак, вверху выделяются символы с восходящими элементами.

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

Движение базовой линии линейного бокса

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

Некоторые примеры:

• Если в строке, охватывающей всю высоту, есть высокий элемент, vertical-align на него не влияет. Над его верхом и под его низом нет места, которое позволяло бы ему двигаться. Чтобы выполнить выравнивание относительно базовой линии линейного бокса, базовая линия линейного бокса должна переместиться. Короткое поле имеет выравнивание по вертикали: базовая линия . Слева высокое поле выровнено по по нижнему тексту .Справа он выровнен по верхнему краю текста . Вы можете увидеть, как базовая линия подпрыгивает, забирая с собой короткую коробку.

  Такое же поведение проявляется при выравнивании высокого элемента с другими значениями для vertical-align .

• Равномерная установка вертикальное выравнивание от до снизу (слева) и сверху (справа) перемещает базовую линию. Это странно, поскольку базовый уровень вообще не должен быть задействован.

• Размещение двух больших элементов в линию и их выравнивание по вертикали перемещает базовую линию в том месте, где она выполняет оба выравнивания. Затем регулируется высота линейного бокса (слева). Добавление третьего элемента, который не выходит за края линейного бокса из-за его выравнивания, не влияет ни на высоту линейного бокса, ни на положение базовой линии (в центре).Если он * действительно * выходит за границы линейного прямоугольника, высота и базовая линия линейного прямоугольника снова корректируются. В этом случае наши первые два поля сдвинуты вниз (справа).

Может быть небольшой промежуток ниже встроенных элементов

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

Как видите, элементы списка располагаются на базовой линии. Под базовой линией есть пространство для нижних элементов текста. Это вызывает разрыв. Решение? Просто переместите базовую линию в сторону, например, выровняв элементы списка с помощью vertical-align: middle :

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

Разрыв между элементами встроенного уровня нарушает макет

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

Вы можете увидеть этот промежуток в предыдущем примере между элементами списка. Разрыв возникает из-за белого пространства между встроенными элементами, присутствующими в вашей разметке. Все пробелы между строковыми элементами сворачиваются в одно пространство. Это пространство мешает, если мы хотим разместить два встроенных элемента рядом друг с другом и присвоить им ширину : например, 50% . Не хватает места для двух 50% -ных элементов и места. Таким образом, строка разбивается на две строки, разрушая макет (слева).Чтобы удалить пробел, нам нужно удалить пробел, например, в комментариях html (справа).

  

  
    
  
      
         

          50% шириной
         
         

          50% шириной ... и в следующей строке
         
      
    

  

 

  
 шириной 50% 
 шириной 50% ... и в следующей строке 


   
 шириной 50% 
  
 шириной 50% 

  

Вертикальное выравнивание, демистификация

Ага, вот и все. Это не очень сложно, если вы знаете правила. Если vertical-align не работает, просто задайте следующие вопросы:

• Где находится базовая линия, а также верхний и нижний края линейного прямоугольника?
• Где находится базовая линия, верхний и нижний край элементов встроенного уровня?

Это поможет найти решение проблемы.

Вот более сложный пример того, как вертикально центрировать элемент в

 

<стиль>
h3 {
выравнивание текста: центр;
}
п {
выравнивание текста: центр;
}



 Подпись 
 Это центрированный текст 
 Это центрированный текст 
 Это центрированный текст 
 Это центрированный текст 
 Это центрированный текст 
 Это центрированный текст 
 Это центрированный текст 
 
 

 

<стиль>
h3 {
выравнивание текста: центр;
}
п {
маржа слева: авто;
маржа-право: авто;
ширина: 12em
}



 Подпись 
 Это центрированный текст.Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. Это текст по центру. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст. текст - это центрированный текст. это центрированный текст. это центрированный текст. это центрированный текст.Это центрированный текст. Это центрированный текст. V 


 

 

<стиль>
h3 {
выравнивание текста: центр;
}
div {
маржа слева: авто;
маржа-право: авто;
ширина: 12em;
вертикальное выравнивание: по центру;
}





 Этот небольшой абзац...



 

 

<стиль>
img {
дисплей: блок;
маржа слева: авто;
маржа-право: авто;
}




 Центрировать изображение 
 Это обычный текст, в котором нет никаких особых замечаний.




 

 

<стиль>
.center {
отступ: 70 пикселей 0;
граница: сплошной синий цвет 3px;
}




 По центру по вертикали 
 Мы можем использовать свойство padding для центрирования по вертикали 


 Я по центру вертикально.



 

 

<стиль>
.center {
высота строки: 200 пикселей;
высота: 200 пикселей;
граница: сплошной зеленый цвет 3px;
выравнивание текста: центр;
}

.center p {
высота строки: 1,5;
дисплей: встроенный блок;
вертикальное выравнивание: по центру;
}




 Центрирование 
 Мы также можем центрировать данный текст или изображение по вертикали и горизонтали.Мы будем использовать атрибуты line-heigh и vertical-align с разными значениями 


 Я центрирован по вертикали и горизонтали. 



 

 <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default.aspx.cs" Inherits = "Rvl.HelperTools.Website._Default"%>