Vertical align: Vertical alignment · Bootstrap — GnomesMonetiZed.RU — Экономическая онлайн игра Золото лепреконов

Содержание

Свойство vertical-align — Блог HTML Academy

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

baseline
sub
super
text-top
text-bottom
middle
top
bottom
указание расстояния
указание процентов

Типографские единицы измерения

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

Типографские единицы измерения

Цвет	Единица	Описание
	baseline	базовая линия шрифта
	subscript baseline	базовая линия нижнего индекса строки
	superscript baseline	базовая линия верхнего индекса строки
	x height	высота буквы «x» шрифта
	line height	высота строки
	font top	верхняя линия, верхняя граница шрифта
	font bottom	нижняя линия, нижняя граница шрифта

Значения

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

Baseline (базовая линия)

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

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

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

Базовая линия для ячеек таблицы

Sub

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

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

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

Super

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

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

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

Text-top

Значение text-top для строчных элементов выравнивает верхнюю границу текущего элемента по верхней линии шрифта родительского элемента.

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

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

Text-bottom

Значение text-bottom для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе шрифта родительского элемента.

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

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

Middle

Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.

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

Для табличных элементов это значение выравнивает содержимое текущей ячейки по центру строки с учётом внутренних отступов (padding-box).

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

Top

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

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

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

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

Bottom

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

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

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

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

Расстояние

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

Смещение базовой линии с помощью указания расстояния

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

Проценты

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

Смещение базовой линии с помощью указания процентов

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

vertical-align | CSS (Примеры)

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

Колонки и таблицы

Синтаксис

/* keyword values */
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;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Значения

baseline: Выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница.
bottom: Выравнивает низ блока по нижней части строки.
middle: Выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x».
sub: Опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста.
super: Поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста.
text-bottom: Нижняя граница элемента выравнивается по нижнему краю содержимого родителя.
text-top: Верхняя граница элемента выравнивается по верхнему краю содержимого родителя.
top: Выравнивает верх блока по верхней части строки.

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

line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения:

baseline: Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom: Выравнивает по нижнему краю ячейки.
middle: Выравнивает по середине ячейки.
top: Выравнивает содержимое ячейки по её верхнему краю.

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

Применяется к строчным элементам или ячейкам таблицы

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

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vertical-align</title>
    <style>
      .tex {
        font-size: 2rem;
      }
      .tex sub {
        vertical-align: sub;
        font-size: 1.8rem;
      }
      .tex sup {
        vertical-align: 5px;
        font-size: 1.6rem;
      }
    </style>
  </head>
  <body>
    <div>
      T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X
    </div>
  </body>
</html>

`vertical-align: middle` делает не то, что я ожидал

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

<table>
    <tr>
        <td>
            I am vertically centered text!
        </td>
    </tr>
</table>

Однако, если я применяю это к другому элементу, он функционирует по-другому или вообще не работает. Например:

<div>
    I am not vertically centered, but I wish I was :(
</div>

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

Вот jsfiddle с примерами всех этих сценариев.

Мой вопрос заключается в том, как я могу выполнить вертикальное выравнивание центра внутри простого DIV точно так же, как он ведет себя в ячейке таблицы?

javascript jquery html css
Поделиться Источник Chev 08 мая 2012 в 20:26
4 ответа
Как правильно использовать vertical-align: middle;?
Я хочу, чтобы мой список (nav) был выровнен по центру изображения (логотипа). Я попытался использовать vertical-align: middle; , но не смог заставить его работать, когда плавал по изображениям влево и вправо. Вот мой код: HTML: <div id=head> <img id=logo src=logo.png /> <ul…

Почему vertical-align: middle не работает на моем span или div?
Я пытаюсь вертикально центрировать элемент span или div внутри другого элемента div . Однако когда я ставлю vertical-align: middle , ничего не происходит. Я попытался изменить свойства display обоих элементов, и, похоже, ничего не работает. Это то, что я сейчас делаю на своей веб-странице: .main {…

2

Добавьте display: table-cell в свой div.
jsFiddle: http://jsfiddle.net/7FYBa/20/
<div> <div> I am not vertically centered, but I wish I was :( </div> </div>
Поделиться Jonathan Payne 08 мая 2012 в 20:29

2

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

Поделиться Richard Neil Ilagan 08 мая 2012 в 20:36
Поделиться Vitalii Petrychuk 08 мая 2012 в 20:41

0

vertical-align работает для none-table-elements, когда вы увеличиваете line-height .
#elem { vertical-align: middle; line-height: 100px; }
Но, конечно, разметка не так проста с помощью line-height .
Поделиться Johannes Egger
08 мая 2012 в 20:45
Похожие вопросы:

CSS: почему «vertical-align: middle» не работает?
Рассмотрим следующий пример: ( живая демонстрация здесь ) HTML: <a><img src=http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg /></a> CSS: a { display:…

Используйте ‘vertical-align: middle;’ не работает для меня в CSS
У меня есть два вида в супер-виде, код ниже: <view class=search> <view class=section> <input id=input-word placeholder=请输入您要查询的文本 focus/> <navigator id=cancel-button…

Что на самом деле делает vertical-align: middle? Где это ссылка?
Если у вас есть два встроенных элемента, которые разделяют одну и ту же строку, и больший из них- vertical-align: baseline , а меньший- vertical-align: middle , почему средний выровненный элемент…

Как правильно использовать vertical-align: middle;?
Я хочу, чтобы мой список (nav) был выровнен по центру изображения (логотипа). Я попытался использовать vertical-align: middle; , но не смог заставить его работать, когда плавал по изображениям влево…

Почему vertical-align: middle не работает на моем span или div?
Я пытаюсь вертикально центрировать элемент span или div внутри другого элемента div . Однако когда я ставлю vertical-align: middle , ничего не происходит. Я попытался изменить свойства display обоих…

‘vertical-align: middle’ не работает
http://codepen.io/abdulahhamzic/pen/rLBoOj Я пытаюсь сделать так, чтобы абзацы (имя и другая информация потока) были выровнены по вертикали в середине их родителей div. Я пробую этот код CSS, и он…

Почему vertical-align: middle выталкивает мое изображение из своего контейнера?
JSFiddle ссылка HTML: <div id=va-m> <img src=http://placehold.it/150×150> <h2> vertical-align: middle </h2> </div> <div id=no-va> <img…

css img vertical-align to middle не работает. — Что случилось?
// My HTML CODE HERE <div id=main> <div id=wrap> <div class=header> <span class=img_frame> <img src=http://phone.pe.hu/main_logo_white.png> </span> </div>…

css использование float: right with vertical-align: middle
У меня есть 2 дива (в обертке), которые я использую для отображения фотографии и названия фотографии бок о бок и выравнивания по вертикали посередине. Проблема, с которой я сталкиваюсь, заключается…

Почему vertical-align: middle; не работает в этом коде?
интересно, почему vertical-align: middle; не изменяет положение текста в моем данном примере. я хочу, чтобы каждый элемент с классом navlinks центрировал свой текст по вертикали middle:you может…
vertical-align | CSS справочник
Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 4.0+ 1.0+
Описание
CSS свойство vertical-align управляет вертикальным выравниванием строчных элементов и содержимого ячеек таблицы.
Если свойство применяется к строчному элементу, то оно влияет на выравнивание самого строчного элемента, а не его содержимого.
Если vertical-align применяется к ячейке таблицы, то оно влияет на выравнивание всего содержимого, расположенного в ячейке таблицы, а не на саму ячейку.
Допускается использование отрицательных значений.
Значение по умолчанию: baseline (для строчных элементов), middle (для ячеек таблицы)
Применяется: к строчным элементам (inline, inline-block) и ячейкам таблицы (table-cell)
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.verticalAlign=»bottom»
Синтаксис
vertical-align: baseline|величина|sub|super|top|text-top|middle|bottom|text-bottom|inherit;
Значения свойства для строчных элементов
Значение Описание
baseline Базовая линия элемента выравнивается относительно базовой линии родительского элемента.
sub Выравнивает элемент по типу нижнего индекса.
super Выравнивает элемент по типу верхнего индекса.
text-top Выравнивает верхний край элемента относительно верхнего края шрифта родительского элемента.
text-bottom Выравнивает нижний край элемента относительно нижнего края шрифта родительского элемента.
middle Выравнивает середину элемента относительно базовой линии родительского элемента.
top Выравнивает верхний край элемента относительно верха самого высокого элемента в строке.
bottom Выравнивает нижний край элемента относительно нижнего края элемента, расположенного ниже всех в строке.
величина Смещает базовую линию текущего элемента на указанную величину вверх/вниз относительно базовой линии родителя. Величина смещения указывается в единицах измерения, используемых в CSS. Величина указанная в процентах вычисляются относительно высоты строки (line-height) установленной для элемента. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного – вниз.
% Смещает базовую линию элемента на указанную величину вверх/вниз относительно базовой линии его родительского элемента. Величина смещения указанная в процентах вычисляется в зависимости от высоты строки. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного — вниз.
Значения свойства для ячеек таблицы
Значение Описание
top Выравнивает содержимое относительно верхнего края ячейки.
middle Выравнивает содержимое относительно середины ячейки.
bottom Выравнивает содержимое относительно нижнего края ячейки.
baseline (sub, super, text-top, text-bottom, величина, и %) Базовой линией ячейки таблицы является базовая линия первой текстовой строки в ячейке. Если в ячейке нет никакой текстовой строки, то базовой линией является нижний край элемента, расположенного внутри ячейки. Базовая линия, имеющая максимальную дистанцию до верхнего края ячейки таблицы, является базовой линией для всей строки. Значение baseline используется для выравнивания содержимого нескольких ячеек (для которых установлено выравнивание по базовой линии) по одной базовой линии в строке.
Пример
Демонстрация свойства vertical-aligns.
span#mySpan {
background-color: yellow;
vertical-align: baseline;
}
Свойство vertical-align | CSS справочник
CSS свойства
Определение и применение
CSS свойство vertical-align определяет вертикальное позиционирование встроенных строчных (inline) элементов или ячеек таблицы (table-cell).
Поддержка браузерами
CSS синтаксис:
vertical-align:"baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit";
JavaScript синтаксис:
object.style.verticalAlign = "sub"
Значения свойства
Значение Описание
baseline Выравнивает базовую линию текущего элемента по базовой линии родителя. Это значение по умолчанию.
length Поднимает или опускает базовую линию элемента на указанную величину относительно базовой линии родителя. Величина смещения указывается в единицах измерения, применяемых в CSS. При использовании положительного значения смещение происходит вверх, при отрицательном — вниз. Допускаются отрицательные значения
% Поднимает или опускает базовую линию элемента на указанную величину. Величина смещения в процентах расчитывается в зависимости от высоты строки (свойство line-height). При использовании положительного значения смещение происходит вверх, при отрицательном — вниз. Допускаются отрицательные значения
sub Выравнивает элемент, как подстрочный (нижний индекс).
super Выравнивает элемент, как надстрочный (верхний индекс).
top Верх элемента выравнивается по верху самого высокого элемента в строке.
text-top Верх элемента выравнивается с верхом шрифта родительского элемента.
middle Элемент размещается в середине родительского элемента.
bottom Низ элемента выравнивается с самым низким элементом в строке.
text-bottom Низ элемента выравнивается с низом шрифта родительского элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.
Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения^*:
Значение Описание
baseline Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top Выравнивает содержимое ячейки вертикально по верхнему краю.
middle Выравнивает содержимое ячейки вертикально по середине.
bottom Выравнивает содержимое ячейки вертикально по нижнему краю.
^* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.
Версия CSS
CSS1
Наследуется
Нет.
Анимируемое
Да.
Пример использования
<!DOCTYPE html> <html> <head> <title>Вертикальное позиционирование.</title> <style> div { width : 30%; /* задаём ширину блока */ } img { width : 75px; /* задаём ширину изображения */ height : 75px; /* задаём высоту изображения */ } p { background-color : orange; /* задаём задний фон для элемента <p> */ } .top { vertical-align : text-top; /* верх элемента выравнивается с верхом шрифта родительского элемента */ } .bottom { vertical-align : text-bottom; /* низ элемента выравнивается с низом шрифта родительского элемента */ } </style> </head> <body> <p>Baseline<img src = "nich.jpg" alt = "nich"></p> <p>Text-Top<img src = "nich.jpg" alt = "nich" class = "top"></p> <p>Text-Bottom<img src = "nich.jpg" alt = "nich" class = "bottom"></p> </body> </html>
Пример вертикального позиционирования.CSS свойства
CSS vertical-align

Пример
Вертикальное выравнивание изображения:
img.a {
    vertical-align: baseline;
}
img.b {
    vertical-align: text-top;
}
img.c {
    vertical-align: text-bottom;
}
img.d {
    vertical-align: sub;
}
img.e {
    vertical-align: super;
}
Определение и использование
Свойство vertical-align задает вертикальное выравнивание элемента.
Значение по умолчанию: baseline
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.verticalAlign=»top»
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство
vertical-align 1.0 4.0 1.0 1.0 4.0
Синтаксис CSS
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
Значения свойств
Значение Описание
baseline Элемент выравнивается по базовой линии родительского элемента. Это значение по умолчанию
length Поднимает или понижает элемент по заданной длине. Допустимы отрицательные значения. Читать о единицах длины
% Увеличивает или понижает элемент в процентах от свойства «высота строки». Допустимы отрицательные значения
sub Элемент выравнивается по базовому индексу родительского
super Элемент выравнивается по базовому индексу родительского
top Элемент выравнивается по верхней части самого высокого элемента на линии
text-top Элемент выравнивается по верхнему краю шрифта родительского элемента
middle Элемент помещается в середину родительского элемента
bottom Элемент выравнивается по нижнему элементу в строке
text-bottom Элемент выравнивается по нижнему краю шрифта родительского элемента
initial Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit Наследует это свойство из родительского элемента. (Читайте о inherit)
Похожие страницы
CSS Справочник: CSS Text
HHTML DOM reference: verticalAlign Свойство

Свойство text-align, vertical-align. Справочник CSS
Содержание:
Свойство TEXT-ALIGN
Свойство Значения Пр* Нc*
text-align left, center, right, justify, inherit + +
Свойство определяет горизонтальное выравнивание текста внутри элемента.
Значения:
• left — горизонтальное выравнивание элемента по левому краю. В большинстве случаев браузеры используют это значение по умолчанию.
• center — выравнивание по центру.
• right — по правому краю.
• justify — по всей ширине, где браузер самостоятельно регулирует расстояния между словами и буквами содержимого строки. В зависимости от браузера результаты могут разниться.
• inherit — наследование свойств родителя.
Пример:
<style> p#right { text-align: right;} p#center { text-align: center;} </style> <p>Выравнивание по правому краю</p> <p>Выравнивание по центру</p>
Свойство VERTICAL-ALIGN
Свойство Значения Пр* Нc*
vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, %, ДЛИНА, inherit * —
Свойство определяет вертикальное выравнивание базовой линии строкового элемента относительно базовой линии самой строки. Для ячеек таблицы свойство Vertical-align действует аналогично, выравнивая содержимое ячейки по вертикали относительно блока самой ячейки.
Область применения*: строковые элементы, ячейки таблиц.
Значения:
Допускаются отрицательные значения для длины и процентных значений, при этом элемент смещается вниз. Для ячеек таблиц применяются только значения baseline, top, middle и bottom:
• baseline — выравнивает базовую линию строки по базовой линии своего родителя.
• sub — смещает элемент вниз, делая его подстрочным (не изменяя размер шрифта).
• super — противоположно sub, со смещением элемента вверх (см. пример).
• top — выравнивает содержимое строки по верхней границе самого высокого её элемента (см. пример).
• text-top — верхняя граница строки определяется верхней границей самого высокого элемента (см. пример).
• middle — совмещает среднюю точку строки с точкой, находящейся выше базовой линии родителя на половину ex (относит. ед. измерения: равна высоте символа «x»).
• bottom — противоположно top, выравнивает содержимое строки по нижней границе самого низкого элемента.
• text-bottom — нижняя граница строки определяется нижней границей самого низкого элемента.
• % — элемент сдвигается на заданный процент от значения свойства Line-height.
• inherit — наследование свойств родителя.
Пример:
<style type="text/css"> .super { vertical-align: super;} .top { vertical-align: top;} .text-top { vertical-align: text-top;} </style> <p>Выравнивание слова <span>Надстрочный</span> по вертикали.</p> <p>Выравнивание содержимого <img src="img2-50.jpg"> по верху самого высокого элемента.</p> <p>Выравнивание строки <img src="img2-50.jpg"> по верху самого высокого элемента.</p>
Содержание:
Поделиться с друзьями:
с выравниванием по вертикали · Документы WebPlatform
Сводка
Свойство vertical-align управляет вертикальным выравниванием встроенных элементов или текста по сравнению с базовой линией. Если это свойство используется в ячейках таблицы, оно контролирует вертикальное выравнивание содержимого ячейки таблицы.
Обзорная таблица
Начальное значение
базовый
Относится к
строковых элементов и элементов «таблица-ячейка»
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
:
Анимационный
Нет
Свойство объектной модели CSS
:
В процентах
относится к «высоте строки» самого элемента.
Синтаксис
выравнивание по вертикали: <длина>
вертикальное выравнивание: <процент>
вертикальное выравнивание: базовая линия
Выровнять по вертикали: снизу
вертикальное выравнивание: среднее
выравнивание по вертикали: переходник
с выравниванием по вертикали: super
vertical-align: text-bottom
vertical-align: text-top
Выровнять по вертикали: сверху
Значения
базовый
По умолчанию.Вертикально выравнивает содержимое по базовой линии его родительского элемента.
средний
Вертикально выравнивает содержимое по середине его родительского элемента.
переходник
Вертикальное выравнивание содержимого по нижнему индексу.
супер
Вертикальное выравнивание содержимого по верхнему индексу.
верхний текст
Вертикально выравнивает содержимое по верхнему краю родительского элемента.
нижний текст
Вертикально выравнивает содержимое по нижнему краю родительского элемента.
<процент>
Повышает или понижает содержание в процентах от высоты строки. Если установлено положительное число, содержимое увеличивается по сравнению с базовой линией его родительского элемента. Если задано отрицательное число, содержимое уменьшается по сравнению с базовой линией его родительского элемента. Если установлено значение 0 , это эквивалентно базовому уровню .
<длина>
Поднимает или опускает контент на указанную длину. Если установлено положительное число, содержимое увеличивается по сравнению с базовой линией его родительского элемента.Если задано отрицательное число, содержимое уменьшается по сравнению с базовой линией его родительского элемента. Если установлено значение 0 , это эквивалентно базовому уровню .
верх
Вертикальное выравнивание содержимого и его потомков по верхнему краю текстовой строки.
низ
Вертикальное выравнивание содержимого и его потомков по нижней части текстовой строки.
Примеры
В этом примере используется свойство vertical-align для выравнивания текста в ячейке таблицы.
<таблица> С выравниванием по верхнему краю Выровнено по центру По нижнему краю
Посмотреть живой пример
Связанные спецификации
CSS, уровень 2 (редакция 1)
Рекомендация
Атрибуции
Vertical Alignment — Tailwind CSS
Baseline
Используйте align-baseline , чтобы выровнять базовую линию элемента с базовой линией его родительского элемента.
Быстрая, коричневая лиса, перепрыгнула через ленивого пса.
...
Top
Используйте align-top , чтобы выровнять верх элемента и его потомков с верхом всей строки.
Быстрая, коричневая лиса, перепрыгнула через ленивого пса.
...
Middle
Используйте align-middle , чтобы выровнять середину элемента с базовой линией плюс половину высоты x родительского элемента.
Быстрая, коричневая лиса, перепрыгнула через ленивого пса.
...
Bottom
Используйте align-bottom , чтобы выровнять нижнюю часть элемента и его потомков с нижней частью всей строки.
Быстрая, коричневая лиса, перепрыгнула через ленивого пса.
...
Text Top
Используйте align-text-top для выравнивания верха элемента с верхом шрифта родительского элемента.
Быстрая, коричневая лиса, перепрыгнула через ленивого пса.
...
Text Bottom
Используйте align-text-bottom , чтобы выровнять нижнюю часть элемента по нижней части шрифта родительского элемента.
Быстрая, коричневая лиса, перепрыгнула через ленивого пса.
...
Responsive
Чтобы управлять вертикальным выравниванием только в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите вертикального выравнивания.Например, добавление класса md: align-top к элементу приведет к применению утилиты align-top при средних размерах экрана и выше.
... Lorem ipsum dolor sit amet, conctetur adipisicing elit.
Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.
Настройка
Варианты
По умолчанию для утилит вертикального выравнивания генерируются только адаптивные варианты.
Вы можете контролировать, какие варианты генерируются для утилит вертикального выравнивания, изменив свойство verticalAlign в разделе вариантов файла tailwind.config.js .
Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:
module.exports = { варианты: { продлевать: { + verticalAlign: ['hover', 'focus'], } } }
Если вы не планируете использовать утилиты вертикального выравнивания в своем проекте, вы можете полностью отключить их, установив для свойства verticalAlign значение false в разделе corePlugins вашего файла конфигурации:
модуль.export = { corePlugins: { + verticalAlign: ложь, } }
CSS2 >> Свойства >> выравнивание по вертикали
Версия: Уровень 1 / Расширен на уровне 2
Совместимость: IE4 + N4 +
Синтаксис:
выравнивание по вертикали: базовая линия | суб | супер | наверх | текст вверху | средний | внизу | текст внизу | процент | длина
вверху (Уровень 1)
Значение вверху выравнивает выбранные символы, буквы, слова или текст с самым высоким символом в той же строке.
text-bottom (Уровень 1)
Значение text-bottom выравнивает выбранные символы, буквы, слова или текст по самому высокому символу в выбранной строке.
text-top (Уровень 1)
Значение text-top выравнивает выбранные символы, буквы, слова или текст с самым высоким символом в выбранной строке.
super (Уровень 1)
Значение super помещает выбранные символы, буквы, слова или текст в качестве верхнего индекса.
sub (Уровень 1)
Значение sub помещает выбранные символы, буквы, слова или текст в качестве подстрочного индекса.
процентов (уровень 1)
процентов Значение основано на высоте строки. Нижняя часть строки (базовая линия) обозначается 0%, а верхняя — 100%. Процент может быть положительным или отрицательным и может превышать 100% по величине. Отрицательное значение в процентах соответствует уровню ниже базовой линии, а положительное — выше.
средний (уровень 1)
Среднее значение выравнивает выбранные символы, буквы, слова или текст по средней точке (середине) той же строки.
Длина
(Уровень 2)
Длина Значения поднимают или опускают элемент выше или ниже базовой линии на указанную величину. Положительное значение повышается, а отрицательное — понижается. Нулевое значение является базовым. Вы можете использовать любой из следующих семи модулей. Используйте сокращение.

pc6
Длина Сокр.
сантиметров см
ems em
дюймов дюймов
миллиметров мм
точек pt
внизу (уровень 1)
Нижнее значение выравнивает выбранные символы, буквы, слова или текст с младшим символом в той же строке.
базовый план (уровень 1)
Базовый план Значение является значением по умолчанию. Он выравнивает выделенный текст по базовой линии (внизу) строки. Объявив baseline , вы можете гарантировать, что любое предыдущее объявление не повлияет на выбранный текст.
Свойство vertical-align предоставляет широкий выбор вариантов выравнивания символов, букв, слов и текста относительно базовой линии выбранной строки символов, букв, слов или текста.Это свойство не передается по наследству.
Примеры
Код:
img {vertical-align: baseline; } img {вертикальное выравнивание: sub; } img {вертикальное выравнивание: супер; } img {вертикальное выравнивание: сверху; } img {вертикальное выравнивание: верхний текст; } img {выравнивание по вертикали: середина; } img {вертикальное выравнивание: низ; } img {вертикальное выравнивание: нижний текст; } img {вертикальное выравнивание: -50%; } img {вертикальное выравнивание: 125%; } img {вертикальное выравнивание: -5 пикселей; } img {выравнивание по вертикали: 10 мм; }
Язык (и): CSS2
Код:
img.тп {вертикальное выравнивание: сверху; } img.md {vertical-align: middle; } img.bt {выравнивание по вертикали: низ; } ... Гуру Гуру
Гуру
Вывод:
Гуру Гуру Гуру
Язык (и): CSS2
См. Также:
CSS: свойство vertical-align
В этом руководстве по CSS объясняется, как использовать свойство CSS под названием vertical-align с синтаксисом и примерами.
Описание
Свойство CSS vertical-align определяет вертикальное выравнивание встроенного элемента или элемента ячейки таблицы.
Синтаксис
Синтаксис CSS-свойства vertical-align:
выравнивание по вертикали: значение;
Параметры или аргументы
значение
Выравнивание текста. Это могут быть разные значения в зависимости от того, является ли элемент встроенным элементом или элементом ячейки таблицы.
Значение для встроенных элементов
Если значение является встроенным элементом, оно может быть одним из следующих:
Элемент
Значение Описание
верх Верх элемента и его потомков выравнивается по верху всей строки
img {vertical-align: top; }
низ Нижняя часть элемента и его потомков выровнены по нижнему краю всей строки.
img {vertical-align: bottom; }
исходный Базовая линия элемента выровнена с базовой линией его родительского элемента
img {vertical-align: baseline; }
переходник Базовая линия элемента выровнена с нижней линией его родительского элемента
img {vertical-align: sub; }
супер Базовая линия элемента выровнена с верхним индексом его родительского элемента
img {vertical-align: super; }
текст вверху Верх элемента выравнивается по верхнему краю шрифта родительского элемента.
img {vertical-align: text-top; }
текст внизу Нижний край элемента выровнен по нижнему краю шрифта родительского элемента.
img {vertical-align: text-bottom; }
средний Середина элемента выравнивается по середине строчных букв в шрифте родительского элемента.
img {vertical-align: middle; }
фиксированный Базовая линия элемента выравнивается на заданную фиксированную величину выше базовой линии его родительского элемента.
img {vertical-align: 5px; }
процентов Базовая линия элемента выровнена на заданную процентную величину выше базовой линии его родительского элемента (в процентах от свойства line-height)
img {vertical-align: 10%; }
унаследовать унаследует свойство vertical-align от своего родительского элемента
img {vertical-align: inherit; }
Значение ячеек таблицы
Если значение является ячейкой таблицы, оно может быть одним из следующих:
Элемент
Значение Описание
верх Верхний край заполнения ячейки выровнен с верхом строки
td {vertical-align: top; }
средний Центр поля заполнения ячейки выровнен внутри строки
td {vertical-align: middle; }
низ Нижний край заполнения ячейки выровнен с нижней частью строки
td {vertical-align: top; }
унаследовать унаследует свойство vertical-align от своего родительского элемента
td {vertical-align: inherit; }
Примечание
Свойство vertical-align может иметь отрицательное значение.
Если элемент не имеет базовой линии, свойство vertical-align будет использовать вместо этого край поля.
Совместимость с браузером
Свойство CSS vertical-align имеет базовую поддержку в следующих браузерах:
Хром
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
IE Телефон
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile
Пример
Мы обсудим свойство vertical-align ниже, исследуя примеры использования этого свойства в CSS.
со встроенными элементами
Давайте посмотрим на пример CSS с вертикальным выравниванием со встроенными элементами.
img {vertical-align: top; }
В этом примере CSS с вертикальным выравниванием мы установили для свойства vertical-align значение top для тега .
с ячейками таблицы
Затем давайте посмотрим на пример CSS с вертикальным выравниванием, в котором мы выравниваем текст по левому краю.
td {vertical-align: bottom; }
В этом примере CSS с вертикальным выравниванием мы установили для свойства vertical-align значение bottom для тега.
CSS vertical-align Свойство
Свойство vertical-align определяет вертикальное выравнивание встроенного блока, блока встроенного блока или поля ячейки таблицы. К элементам встроенного уровня относятся изображения, текст, кнопки и т. Д.
Это свойство работает только в следующих контекстах:
Для вертикального выравнивания содержимого внутри ячеек таблицы () и элементов с отображением: table-cell.
Для вертикального выравнивания прямоугольника встроенного элемента внутри его линейного поля. Э.грамм. его можно использовать для вертикального выравнивания в строке текста.
Мы не можем использовать свойство vertical-align для вертикального выравнивания элементов уровня блока.
Синтаксис¶
vertical-align: baseline | длина | суб | супер | наверх | текст вверху | средний | внизу | текст внизу | начальная | наследовать;
Пример свойства vertical-align со значением «sub»: ¶
Название документа <стиль> охватывать { вертикальное выравнивание: суб; } Пример свойства с выравниванием по вертикали Это абзац с vertical-align свойство.
Попробуйте сами »
Результат¶
Пример свойства vertical-align со« средним »значением: ¶
Название документа <стиль> охватывать { вертикальное выравнивание: по центру; } Пример свойства с выравниванием по вертикали Это абзац с vertical-align свойство.
Попробуйте сами »
Пример свойства vertical-align со значением« super »: ¶
Название документа <стиль> охватывать { вертикальное выравнивание: супер; } Пример свойства с выравниванием по вертикали Это абзац с vertical-align свойство.
Попробуйте сами »
Пример свойства vertical-align со значениями» top «и» bottom «: ¶
Название документа <стиль> стол { ширина: 100%; граница-коллапс: коллапс; } стол, th, td { граница: сплошная 1px #cccccc; } td { высота: 100 пикселей; } .верх { вертикальное выравнивание: сверху; } .Нижний { вертикальное выравнивание: снизу; } Пример свойства с выравниванием по вертикали <таблица> Внизу Средний Вверх Некоторый текст Некоторый текст Некоторый текст
Попробуйте сами »
Values¶

vertical-align · html
Свойство CSS vertical-align определяет вертикальное выравнивание встроенного поля или поля ячейки таблицы.
/ * Значения ключевых слов * / вертикальное выравнивание: базовая линия; вертикальное выравнивание: суб; вертикальное выравнивание: супер; вертикальное выравнивание: текст сверху; вертикальное выравнивание: нижний текст; вертикальное выравнивание: по центру; вертикальное выравнивание: сверху; вертикальное выравнивание: снизу; / * значения <длина> * / вертикальное выравнивание: 10em; вертикальное выравнивание: 4 пикселя; / * значения <процент> * / вертикальное выравнивание: 20%; / * Глобальные значения * / вертикальное выравнивание: наследование; вертикальное выравнивание: начальное; вертикальное выравнивание: отключено;
Свойство vertical-align можно использовать в двух контекстах:
Для вертикального выравнивания прямоугольника встроенного элемента внутри содержащего его линейного поля.Например, его можно использовать для вертикального расположения в строке текста:
的 code ，如果有一天，你忘记了的话， copy 这段代码
<стиль> * { отступ: 0; маржа: 0; } п { размер шрифта: 24 пикселя; высота строки: 160 пикселей; высота: 160 пикселей; оформление текста: подчеркивание над чертой; граница: сплошной красный 1px; } стол{ граница: сплошной черный 1px; } td { оформление текста: подчеркивание подчеркиванием; } вверху: в центре: внизу: супер: sub: text-top: нижний текст: 1px:
Для вертикального выравнивания содержимого ячейки в таблице:
对应的代码如下
<стиль> table, th, td { граница: 1px solid # 000; } th, td { } стол { граница: сплошной красный 1px; } <таблица> базовый уровень вверх средний снизу Существует теория, согласно которой, если кто-нибудь когда-нибудь узнает, для чего именно Вселенная и почему она существует, она мгновенно исчезнет и будет заменена чем-то еще более причудливым и необъяснимым. Есть еще одна теория, согласно которой это уже произошло.
注意： vertical-align применяется только к элементам inline и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока. (经自己实验, 该属性可 inline-block)
с вертикальным выравниванием | Codrops
Свойство vertical-align используется для выравнивания элементов встроенного уровня, которые расположены рядом друг с другом внутри строчного поля.
Он также используется для выравнивания содержимого внутри ячеек таблицы ( ) и элементов с display: table-cell .
К элементам встроенного уровня относятся изображения, текст, кнопки и т. Д., А также любой элемент с display: inline или display: inline-block .
Без выравнивания встроенных элементов они обычно просто располагаются рядом друг с другом на базовой линии линейного блока.Это означает, что если у вас есть изображение в строке с текстом, изображение всегда будет выровнено по базовой линии текста. Но что, если вы хотите, чтобы изображение было вертикально по центру относительно текста? Это один из наиболее распространенных вариантов использования свойства vertical-align — оно выравнивает встроенный контент по вертикали в разных положениях, в зависимости от переданного ему значения.
Изображение и текст по умолчанию располагаются рядом друг с другом, независимо от размера изображения; его базовая линия выровнена с базовой линией текста.Но что, если вы хотите, чтобы текст располагался по центру изображения? Или наоборот?
Различные значения vertical-align выравнивают элементы на уровне строки по отношению к виртуальным строкам внутри линейного блока. Некоторые из этих виртуальных строк относятся к самому строчному блоку, а некоторые — к тексту внутри строчного блока.
Например, значения top и bottom vertical-align выровняют верхний и нижний края элемента встроенного уровня с верхним и нижним краями линейного блока.Расстояние между верхним и нижним краями линейного блока определяется свойством line-height . Если не указан явный line-height , высота строки определяется всем содержимым внутри него. Другие значения, такие как text-bottom и text-top , например, будут выравнивать элемент относительно виртуальных строк, которые напрямую связаны с используемым шрифтом.
vertical-align может быть установлено с использованием одного из предопределенных значений ключевого слова, длины или процентного значения.
Список возможных значений и визуальное объяснение каждого значения см. В разделе «Значения» ниже.
Выравнивание содержимого ячеек таблицы
Свойство vertical-align также можно использовать в ячейках таблицы или элементах с display: table-cell для выравнивания содержимого внутри них.
Раньше атрибут valign использовался в ячейках таблицы ( ) для выравнивания содержимого внутри этих ячеек.Этот атрибут устарел, поэтому вам больше не следует его использовать.
Следующее установит вертикальное выравнивание всех ячеек таблицы внутри
.
<таблица>

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Officiis, non aliquam accusamus deleniti saepe fugiat correhenderit Inventore! Explicabo, mollitia, nulla repudiandae ullam beatae totam maxime veniam odit quidem Expedita obcaecati. Lorem ipsum dolor sit amet, conctetur adipisicing elit. Nisi, et quisquam ad Provisionnt soluta quis illum consquatur ab. Минус, incidunt, conctetur deserunt itaque nobis excitationem doloribus! Sint non rem репеллендус.

td { вертикальное выравнивание: сверху; }
Следующее будет вертикально выровнять содержимое
, для которого установлено отображение ячейки таблицы:
Lorem ipsum dolor sit amet, conctetur adipisicing elit.Ad, magni, nihil iure repudiandae dicta acceptnda saepe cumque quas culpa soluta odit quae eligendi nam nesciunt animi rem illo voluptates quis.

div { дисплей: таблица-ячейка; вертикальное выравнивание: по центру; }
Здесь очень важно отметить, что установка vertical-align: middle на div здесь используется для выравнивания содержимого внутри div и , а не самого div внутри своего контейнера .
Установка элементов уровня блока на ячейка таблицы — это один из приемов, которые иногда используются для вертикального центрирования содержимого внутри элемента уровня блока. Прочтите следующий раздел примечаний для получения дополнительной информации.
Общая информация и примечания
Как упоминалось выше, свойство vertical-align используется для выравнивания только элементов inline-level ( inline и inline-block ) и элементов таблицы-ячейки.Таким образом, использование его в элементе уровня блока не даст вам никаких результатов, , если вы не предоставите этому элементу уровня блока отображение ячейки таблицы, а затем примените к нему свойство vertical-align .
Многие новички склонны использовать свойство vertical-align в попытке вертикально центрировать элементы, такие как абзацы текста (которые являются элементами уровня блока) или другие элементы уровня блока, такие как заголовки или div внутри других блоков. ровные контейнеры.Когда они это делают, они никогда не добиваются желаемого результата. Кроме того, браузер настроит всех встроенных потомков блочного элемента так, чтобы они унаследовали вертикальное выравнивание, которое они установили для элемента.
Иногда содержимое может быть центрировано по вертикали внутри элемента уровня блока, если этот элемент отображается как ячейка таблицы. Однако это может быть не всегда удобно — возможно, ваш блочный элемент должен отображаться как есть, или ваш макет может испортиться.Кроме того, как мы упоминали ранее, использование vertical-align для элемента с display: table-cell выравнивает содержимое внутри этого элемента, а не сам элемент внутри его родительского контейнера.
Вертикальное выравнивание блочных элементов было одним из святых граалей CSS, поскольку стандартного способа сделать это не существует. Было написано много статей, демонстрирующих методы вертикального центрирования блочных элементов. Вы можете прочитать о различных методах в следующих рекомендуемых статьях:
Значения
Для каждого из следующих значений мы применим его к встроенному изображению внутри строчного поля элемента списка.Линия прямоугольника на каждом из изображений имеет серую пунктирную границу. Линия, которая используется для выравнивания изображений для каждого значения, красная.
базовый
Это значение по умолчанию. Он выравнивает базовую линию элемента с базовой линией линейного блока. Если у элемента нет базовой линии, он выравнивает край нижнего поля с базовой линией линии. Изображение, выровненное по базовой линии линейного блока, расположенное рядом с текстом в строке.Это вертикальное выравнивание по умолчанию.
средний
Выравнивает вертикальную среднюю точку элемента с базовой линией линии плюс половину высоты линии по оси x (определяется шрифтом). Вертикальная средняя точка изображения выравнивается с линией, которая составляет половину x-высоты линии над базовой линией. Это одно из наиболее часто используемых значений свойства vertical-align и обычно используется для выравнивания значков и маркеров списка с текстом в строке.
переходник
Опускает базовую линию элемента в правильное положение для нижних индексов в строке. (Это значение не влияет на размер шрифта текста элемента.) Нижний край изображения опускается так, чтобы он выровнялся с базовой линией подстрочного индекса.
супер
Поднимает базовую линию элемента в правильное положение для надстрочных знаков в строке. (Это значение не влияет на размер шрифта текста элемента.) Нижний край изображения приподнят, чтобы выровнять его с базовой линией верхнего индекса.
верхний текст
Выравнивает верх элемента по верхнему краю области содержимого строки. Высота области содержимого достаточно высока для максимального количества верхних и нижних нижних и шрифтов в строке, а линия выравнивания является вершиной этой высоты. Обратите внимание, что высота может быть больше, чем любой из задействованных размеров шрифта, в зависимости от базового выравнивания шрифтов. Изображение выравнивается по линии чуть выше восходящих элементов шрифта. Если используется более одного шрифта, эта строка будет чуть выше самого верхнего восходящего элемента всех шрифтов.
нижний текст
Выравнивает нижнюю часть элемента по нижней части области содержимого строки. Высота области содержимого достаточно высока для максимального количества верхних и нижних нижних () всех шрифтов в строке, а линия выравнивания является нижней частью этой высоты.Обратите внимание, что высота может быть больше, чем любой из задействованных размеров шрифта, в зависимости от базового выравнивания шрифтов. Изображение выравнивается по линии чуть ниже нижних элементов шрифта. Если используется более одного шрифта, эта строка будет чуть ниже самого нижнего нижнего элемента всех шрифтов.
верх
Выравнивает верх элемента по верху всей линии. Это означает, что если в строке есть другие элементы, каждый с разной высотой, например, несколько изображений, верх строки будет на высоте самого высокого из двух изображений. Изображение, выровненное по верхнему краю линейного поля. Верх определяется самым высоким элементом в строке, который в данном случае является вторым изображением. Если строка имеет явно установленную высоту строки , которая выше, чем максимальное содержимое в строке, верхняя часть линейного блока будет определяться этой высотой. Изображение, выровненное по верхнему краю линейного блока, для которого явно указана высота строки, превышающая высоту всего его содержимого.
низ
Изображение выравнивается по нижней части линейного поля. Поскольку line-height не указана, нижняя часть линейного блока определяется самыми низкими подстрочными элементами шрифта в этом примере, поэтому результат похож на тот, который мы получили при использовании text-bottom . Выравнивает элемент по нижней части всей строки. Если для строки явно задана line-height , которая ниже, чем самое низкое содержимое в строке, то нижняя часть строки будет определяться этой высотой. Изображение выравнивается по нижнему краю всего линейного поля. Строка имеет указанную высоту строки , которая растягивает нижнюю часть строки вниз, и изображение выравнивается с этим низом. <процент> Поднимите элемент выше базовой линии (если процентное значение положительное) или опустите элемент ниже базовой линии (если процентное значение отрицательное) на указанную величину. Указанная сумма представляет собой процент от значения высоты строки . Значение 0% означает то же, что и базовый . Изображение выровнено с использованием значения 50%. Указанная высота строки составляет 100 пикселей, поэтому изображение приподнимается на 50 пикселей над базовой линией. <длина> Поднимите элемент над базовой линией (если значение длины положительное) или опустите элемент ниже базовой линии (если значение длины отрицательное) на указанную величину.Значение «0» означает то же, что и базовое значение . Изображение приподнято над базовой линией на указанную величину.
Банкноты
Значения верхний , нижний и средний ведут себя должным образом при применении к элементам ячеек таблицы. Однако другие значения могут иметь неожиданное поведение в некоторых браузерах. Крис Койер говорит об этом лучше всего:
При использовании вертикального выравнивания ячеек таблицы лучше всего использовать верх, низ и середину.В любом случае, ни одно из других значений не имеет большого смысла и дает непредсказуемые результаты кроссбраузерности. Например, установка для ячейки значения text-bottom выравнивает текст по нижнему краю в IE 6 и по верхнему краю в Safari 4. Установка для sub приводит к выравниванию по центру в IE 6 и по верхнему краю в Safari 4.
Вертикальное выравнивание по умолчанию для ячеек таблицы ( ) — среднее . Однако вертикальное выравнивание по умолчанию для элемента уровня блока, имеющего display: table-cell , по-прежнему равно top , что в целом является выравниванием по умолчанию для контейнеров уровня блока.См. Демонстрационный раздел ниже для живого примера.
.No related posts.