Выравнивание по вертикали / Типографика / Документы / ТАХИОНЫ
Выравнивание по вертикали
Используйте вертикальное выравнивание, чтобы правильно настроить типографику. Вертикальное выравнивание работает с элементами встроенного уровня (отображать встроенный и встроенный блок) и с ячейками таблицы.
Это документирует, как вертикальное выравнивание влияет на текстовые элементы. Если бы вы хотите посмотреть, как выравнивать элементы по вертикали — ознакомьтесь с документацией по макету.
Примеры
Выравнивание таблицы
Вы можете использовать классы вертикального выравнивания либо для элементов td, либо для элементов с классом dtc , которые являются прямыми.
дети элемента с классом dt .
.в-середина Выровняйте текст по середине. | |
.в-топ Выровняйте текст по верхнему краю. | |
.в-бтм Выровняйте текст по нижнему краю. |
Выравнивание встроенного блока
Выравнивание по верхнему краю
Контент Контент Контент
Вы можете сказать «Я люблю тебя» в Helvetica. И вы можете сказать это с Helvetica Extra Light, если вы хотите быть действительно модным. Или вы можете сказать это с помощью Extra Смело, если это действительно интенсивно и страстно, вы знаете, и это может сработать.
Вы можете сказать «Я люблю тебя» в Helvetica. И вы можете сказать это с Helvetica Дополнительный свет…
если вы хотите быть действительно фантазии.
Комбинируйте и сочетайте
Контент Контент Контент
Вы можете сказать «Я люблю тебя» в Helvetica. И вы можете сказать это с Helvetica Extra Light, если вы хотите быть действительно модным. Или вы можете сказать это с помощью Extra Смело, если это действительно интенсивно и страстно, вы знаете, и это может сработать.
Вы можете сказать «Я люблю тебя» в Helvetica. И вы можете сказать это с Helvetica Дополнительный свет…
если вы хотите быть действительно фантазии. Или вы можете сказать это с помощью Extra Смело, если это действительно интенсивно и страстно, вы знаете, и это может сработать.
Выровнять по середине
Контент Контент Контент
Вы можете сказать «Я люблю тебя» в Helvetica.
Вы можете сказать «Я люблю тебя» в Helvetica. И вы можете сказать это с Helvetica Дополнительный свет…
если вы хотите быть действительно фантазии.
Выровнять по нижнему краю
Контент Контент Контент
Вы можете сказать «Я люблю тебя» в Helvetica. И вы можете сказать это с Helvetica Extra Light, если вы хотите быть действительно модным. Или вы можете сказать это с помощью Extra Смело, если это действительно интенсивно и страстно, вы знаете, и это может сработать.
Вы можете сказать «Я люблю тебя» в Helvetica. И вы можете сказать это с Helvetica Дополнительный свет…
если вы хотите быть действительно фантазии.
Предыдущий
Стиль шрифтаСледующий
Выравнивание текстаСсылка
MDN — вертикальное выравниваниетахион-вертикальное выравнивание
v4.
0.6
174 Б- Декларации
- 16
- Селекторы
- 16
- Макс. Оценка специфичности
- 10
- Размер Ср. Правило
- 1
/*
ВЕРТИКАЛЬНОЕ ВЫРАВНИВАНИЕ
Расширения медиазапроса:
-ns = не маленький
-м = средний
-л = большой
*/
.v-base { вертикальное выравнивание: базовая линия; }
.v-mid { вертикальное выравнивание: среднее; }
.v-top { вертикальное выравнивание: сверху; }
.v-btm { вертикальное выравнивание: снизу; }
@media (--точка останова-не-маленький) {
.v-base-ns { вертикальное выравнивание: базовая линия; }
.v-mid-ns { вертикальное выравнивание: среднее; }
.v-top-ns { вертикальное выравнивание: сверху; }
.v-btm-ns { вертикальное выравнивание: снизу; }
}
@media (--точка останова-среда) {
.
v-base-m { вертикальное выравнивание: базовая линия; }
.v-mid-m { вертикальное выравнивание: среднее; }
.v-top-m { вертикальное выравнивание: сверху; }
.v-btm-m { вертикальное выравнивание: снизу; }
}
@media (--breakpoint-large) {
.v-base-l { вертикальное выравнивание: базовая линия; }
.v-mid-l { вертикальное выравнивание: среднее; }
.v-top-l { вертикальное выравнивание: сверху; }
.v-btm-l { вертикальное выравнивание: снизу; }
}
Как вертикально выровнять текст с помощью CSS
следующий → ← предыдущая Свойство vertical-align в CSS используется для определения вертикального выравнивания встроенного поля или поля ячейки таблицы. Это одно из очевидных свойств CSS. CSS-свойство vertical-align управляет тем, как элементы располагаются рядом друг с другом. Когда это свойство применяется к ячейкам таблицы, оно влияет не на саму ячейку, а на ее содержимое. Это свойство имеет несколько допустимых значений: базовая линия, верх, низ, середина, текст вверху, текст внизу, суб, супер, и длина ( в пикселях, см, em, и т. Это свойство CSS можно использовать для выравнивания содержимого ячейки в таблице по вертикали. Он может вертикально выровнять изображение в строке текста. Это свойство нельзя использовать для вертикального выравнивания элементов уровня блока. Давайте разберемся в этом свойстве с помощью некоторых иллюстраций. Пример<голова> <стиль> стол, й, тд{ граница: 2 пикселя сплошного красного цвета; граница коллапса: коллапс; размер шрифта: 20px; } #супер{ вертикальное выравнивание: супер; } #sub{ вертикальное выравнивание: суб; } <тело> <таблица> | базовый уровень | средний | внизу | сверху | Здравствуйте! Добро пожаловать на сайт javaTpoint.com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. На javaTpoint.com всегда можно найти простой и подробный учебник по различным технологиям. |
д. ) . Значения этого свойства sub и super обычно используются для нижнего и верхнего индекса текста.
с выравниванием по умолчанию.