Как центрировать по горизонтали и вертикали масштабируемый текст в блоке Grid?
Есть масштабируемый шаблон. Есть блок Grid, который должен полностью быть кликабельной ссылкой. В этом блоке я хочу расположить ровно по центру текст так, чтобы при изменении размера окна браузера текст масштабировался возле этого центра и не выходил за рамки Grid. Проблема: 1). Текст масштабируется по середине горизонтальной строке и в верхней части вертикальной. 2). При большом разрешении текст выезжает за пределы блока, а при слишком маленьком разрешении — текст становится очень маленьким и занимает 1/6 блока. Решил эту проблему, просто задав блоку фоновую картинку в виде text.png с прозрачным слоем. Там и масштабируется все легко, и кликабельная область настраивается просто. Но хочется все же решить вопрос с помощью кода.
Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
задан 7 окт 2018 в 18:09
Хекс Двинский Хекс Двинский
13 6 6 бронзовых знаков
vertical — align
Выравниваем элемент по вертикали без флексов и гридов.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 10 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство vertical — align выравнивает текстовые элементы по вертикали относительно друг друга.
�� Для простого текста это не особо актуально, то вот для строчно-блочных ( inline — block ) элементов это свойство может быть очень полезным.
Пример
Скопировать ссылку «Пример» Скопировано
Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical — align они будут разной высоты:
div class="parent"> div class="element small">div> div class="element medium">div> div class="element big">div> div>
.element display: inline-block; width: 50px; height: 50px; background-color: white;> .medium height: 100px;> .big height: 150px;>.element display: inline-block; width: 50px; height: 50px; background-color: white; > .medium height: 100px; > .big height: 150px; >
-
text — top — верхняя часть элемента выравнивается по верхнему краю родителя:
Помимо ключевых слов можно использовать числовые значения.
Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз.
Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline . Процент рассчитывается от line — height родительского элемента.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство vertical — align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.
�� На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально ��
�� Свойство очень пригождается когда нужно выровнять картинку или эмодзи относительно текста.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Свойство vertical — align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text — align . И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.
�� С появлением флексбоксов выравнивание по вертикали производится при помощи align — items . Поэтому на свойство vertical — align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.
Выровнять текст по центру (по вертикали) у div с display: inline-block
Выровнять текст по центру (по вертикали) у div с display: inline-block . При использовании vertical-align меняется положение самого блока. Возможно ли это сделать без обертывания текста в
?
Отслеживать
задан 29 дек 2017 в 20:08
user272575 user272575
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
div < width: 100px; height: 100px; padding: 5px; display: inline-block; vertical-align: top; border: 1px solid #f00; text-align: center; >div:after
textОтслеживать
ответ дан 29 дек 2017 в 20:27
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Мой любимый костыль, сам пользуюсь
.div-table < display: table; width: 100%; height: 100%; >.div-table-cell В любой нужный элемент вписывается div-table, в него div-table-cell, и вот в него уже всё, что нужно разместить по центру по вертикали
. что угодно, не только текстОтслеживать
ответ дан 29 дек 2017 в 20:20
71 1 1 серебряный знак 6 6 бронзовых знаков
Не самый лучший вариант тк тут меняется тип элемента.
– user272575
29 дек 2017 в 20:55Оно применяется только к строчным элементам inline или строчным блокам inline-block. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.Как выровнять текст или блок по вертикали в CSS?
Делая верстку страницы, вы неизбежно столкнетесь с необходимостью сделать выравнивание текста по вертикали css, и у начинающих веб-разработчиков это может вызвать некоторые сложности.
В сегодняшней статье я хотела бы рассмотреть наиболее эффективные способы выравнивания текста по вертикали в CSS, которые вы смогли бы запомнить или добавить к себе куда-нибудь в шпаргалку и использовать в зависимости от ситуации.
Навигация по статье:
- Свойство для вертикального выравнивания vertical-align
- Выравнивание текста по центру CSS
- Выравнивание блока по центру в CSS
Свойство для вертикального выравнивания vertical-align
Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.
В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.
Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег
и задаем для него стиль vertical-align:middle;
Но на практике все оказывается немного сложней. Дело в том что данное свойство срабатывает только для табличных элементов и для того чтобы оно заработало нужно будет пойти на одну хитрость.
Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.
Предыдущая запись
