Как выровнять текст по вертикали css
За выравнивание по вертикали отвечает CSS-свойство vertical-align . Чаще всего используются значения top, middle и bottom. Выравнивание по вертикали можно наглядно рассмотреть на примере таблицы.
Исходный HTML документ:
class="bottom">Заголовок 1 class="up-center">Заголовок 2 >Текст 1 class="up">Текст 2
table /* Схлапывание границы у таблицы */ border-collapse: collapse; > th, td /* Видимая граница ячеек */ border: 1px solid #000; /* Внутренний отступ и размер ячеек */ padding: 5px; width: 200px; height: 60px; > .up vertical-align: top; > .up-center vertical-align: text-top; > .bottom vertical-align: bottom; > Результат:
Вертикальное выравнивание по центру li a текста
Долго думал в какой раздел пихнуть, сюда или в раздел «проблемы верстки». Решил что раз я тут только что зарегестрировался, то надо пихать в этот раздел, если я не прав — переместите.
Задача :
Сделать на тулбаре список ссылок-кнопок. Чтобы не быть пустомелей вот скрин
(Стрелка на скриншоте заменяет курсор потерянный при printscreen)
Причем чтобы при наведении курсором эта область затемнялась (как на скриншоте)
Также чтобы вся выделенная область была ссылкой
Проблема :
Как видно на скриншоте выше, текст лежит сверху.
Теперь собственно общий вопрос: Как выровнять текст вертикально по центру находящийся внутри li a, при условии что a растянут на всю ширину li.
Или подскажите как лучше такое ссылочное меню сделать.
vertical-align: middle не срабатывает, потому что использует всю область
Изменено 1 сентября 2011 пользователем Fedcomp
Основные свойства для оформления текста в CSS
CSS-свойство color предназначено для задания цвета текста.
Указать цвет можно разными способами. Наиболее популярными из них являются следующие:
- посредством ключевых слов, являющимися названиями цветов (например, color: yellow );
- в шестнадцатиричной системе счисления (например: #00ff00 );
- в формате rgb(red, green, blue) ; здесь вместо red , green и blue нужно указать число от 0 до 255, которое соответственно определяет интенсивность красного, зелёного и синего цветов (например, rgb(76 175 80) – без указания прозрачности, rgb(76 175 80 / 0.5) – с указанием прозрачности);
- в формате hsl(оттенок насыщенность яркость) (например, hsl(122 39% 49%) – без указания прозрачности, hsl(122 39% 49% / 50%) – с указанием прозрачности).
Например, установим всем абзацам красный цвет:
p { /* с использованием названия цвета */ color: red; /* в формате hex */ color: #ff0000; /* в формате rgb */ color: rgb(255 0 0); /* в формате hsl */ color: hsl(0 100% 50%); }Выравнивание текста (text-align)
CSS-свойство text-align предназначено для горизонтального выравнивания текста и других инлайновых элементов внутри блока. Оно может принимать следующие значения:
- start (значение по умолчанию) – работает как left (если направление текста слева направо, то есть direction: ltr ) или как right (если направление текста справа налево, то есть direction: rtl );
- end – работает как right (если direction: ltr ) или как left (если direction: rtl );
- left – по левому краю;
- center – по центру блока;
- right – по правому краю;
- justify – по ширине блока, то есть одновременно по левому и правому краям (чтобы это сделать браузер по умолчанию добавляет пробелы между словами), кроме последней строки;
- match-parent – аналогично inherit , но значения start и end вычисляются в соответствии со значением direction родительского объекта.
Изменять направление текста с помощью CSS-свойства direction не рекомендуется. Вместо этого следует использовать глобальный HTML-атрибут dir .
.block { text-align: left; text-align: center; text-align: right; text-align: justify; }
В CSS кроме text-align имеется также свойство text-align-last . С помощью него мы можем выровнять последнюю строку внутри блока. Это свойство имеет такие же значения как text-align , то есть: start , end , left , center , right и justify . Но кроме них это свойство имеет ещё значение auto . Это значение по умолчанию. Значение auto означает, что последняя строка выравнивается аналогично в соответствии с text-align , но только, если text-align не установлено justify . В этом случае эффект будет таким же, как при установке text-align-last значения start .
.block-1 { text-align: start; text-align-last: end; } .block-2 { text-align: justify; text-align-last: justify; } .block-3 { text-align: end; text-align-last: start; }
Вертикальное выравнивание (vertical-align)
CSS-свойство vertical-align определяет вертикальное выравнивание строчных боксов (inline box) внутри линии строки. Кроме этого vertical-align ещё используется для выравнивания ячеек таблицы.
Данное свойство по умолчанию имеет значение baseline . Оно означает базовую линию, относительно которой выравнивается по вертикали относительно друг друга весь инлайновый контент этой линий строки. При этом под базовой линией понимается воображаемая линия, на которую опираются символы шрифта.
Я схожу с ума от CSS. 
- top – выравнивает верхнюю границу элемента по верхней границе линии строки;
- bottom – выравнивает нижнюю границу элемента по нижней границе линии строки;
- text-top – выравнивает верхнюю границу элемента по верхней линии шрифта;
- text-bottom – выравнивает нижнюю границу элемента по нижней линии шрифта;
- middle – выравнивает середину элемента по середине линии строки (середина вычисляется путём добавления к базовой линии шрифта половины высоты символа «x»);
- sub – выравнивает базовую линию элемента по базовой линии нижнего индекса линии строки;
- super – выравнивает базовую линию элемента по базовой линии верхнего индекса линии строки.
При этом свойство vertical-align необходимо применять не к родителю, а непосредственно к элементу, который необходимо выровнять по вертикали внутри линии строки относительно других элементов.
Я люблю �� Помимо ключевых слов можно использовать конкретные значения, используя различные единицы измерения. В этом случае оно будет определять величину смещения базовой линии элемента относительно базовой линии строки. При этом положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательное — вниз.
Я люблю �� Кроме этого, задавать значения для vertical-align можно ещё в процентах от высоты строки ( line-height ).
Я люблю �� На практике vertical-align очень часто используют, когда нужно выровнять элемент с display: inline или display: inline-block относительно текста.
Home 
С появлением флексбоксов выравнивание элементов по вертикали очень часто выполняется с применением этой технологии:
Home Декорактивные линии (text-decoration)
text-decoration – это CSS-свойство, с помощью которого можно добавить декоративные линии тексту. Оно может принимать следующие значения:
- underline – располагает линию под текстом или иными словами делает текст подчёркнутым (обычно используется для ссылок);
- line-through – добавляет линию, проходящую прямо через текст, то есть делает его перечёркнутым;
- overline – размещает линию над текстом или другими словами делает его надчёркнутым (например, может использоваться, чтобы показать );
- none – отменяет оформление текста.
Если данный эффект для ссылок не нужен, то его можно убрать:
a { text-decoration: none; }При необходимости можно добавить несколько линий тексту, для этого одно ключевое слово следует отделить от другого с помощью пробела:
p { text-decoration: line-through underline; }
Свойство text-decoration является сокращённым. Оно позволяет указать значения для свойств:
- text-decoration-line – положение декоративной линии (по умолчанию none );
- text-decoration-style – стиль линии (по умолчанию solid );
- text-decoration-color – цвет линии (по умолчанию currentcolor );
- text-decoration-thickness – толщина линии (по умолчанию auto , то есть определяется браузером).
.under { text-decoration: underline wavy red 1px; } .over { text-decoration: overline double orange; }
Регистр текста (text-transform)
text-transform – это CSS-свойство, с помощью которого можно трансформировать буквы в тексте, то есть преобразовывать их регистр. Это свойство учитывает правила отображения регистра для конкретного языка. Оно может принимать следущие значения:
- uppercase – преобразует все символы в верхний регистр, то есть делает буквы заглавными;
- lowercase – преобразует все символы в нижний регистр, то есть делает буквы строчными;
- capitalize – преобразует первую букву каждого слова в верхний регистр, другие символы остаются без изменений;
- none – отменяет преобразование букв в тексте.
.tt-none { text-transform: none; } .tt-uppercase { text-transform: uppercase; } .tt-lowercase { text-transform: lowercase; } .tt-capitalize { text-transform: capitalize; }Отступ перед строками (text-indent)
Свойство text-indent предназначено для добавления отступа перед строками.
На практике используется для придания тексту на странице сируктурированного вида. В основном применяется для выделения первой строки абзаца.
При указании значения в px , rem или других единицах измерения добавляет отступ для первой строки. То есть смещает его на эту величину:
p { text-indent: 4rem; }При задании в процентах, величина смещения рассчитывается относительно ширины блока:
p { text-indent: 25%; }Межбуквенное расстояние (letter-spacing)
letter-spacing – это CSS-свойство, с помощью которого можно изменить интервал между символами в тексте.
По умолчанию это свойство имеет значение normal , которое означает, что для текущего шрифта используется стандартное расстояние между символами. В отличие от значения 0, это ключевое слово позволяет пользовательскому агенту (браузеру) изменять расстояние между символами для выравнивания текста.
Для увеличения или уменьшения расстояния между символами необходимо указать конкретное значение:
.el-1 { letter-spacing: normal; } .el-2 { letter-spacing: 0.5em; } .el-3 { letter-spacing: 3px; } .el-4 { letter-spacing: -2px; }
Высота линии (line-height)
CSS-свойство line-height устанавливает высоту линии строки. В большинстве случаев используется для задания расстояниями между линиями текста. При установке элементам с display: block , оно определяет минимальную высоту линии. Для элементов со строчным отображением, оно определяет высоту, которая используется для вычисления высоты контейнера строки (line-box).
Интервал между словами (word-spacing)
word-spacing – это CSS-свойство, с помощью которого мы можем управлять размером интервала между словами и тегами в тексте.
По умолчанию это свойство имеет значение normal , которое означает, что для текущего шрифта используется стандартный интервал. То есть к имеющемуся интервалу, определённому используемым шрифтом, дополнительный не применяется, он равен 0.
При необходимости мы можем задать некоторое конкретное значение дополнительному интервалу, используя различные единицы измерения. Положительное значение увеличивает интервал, а отрицательное – уменьшает.
.element { word-spacing: normal; /* нормальный интервал */ word-spacing: 1rem; /* интервал между словами увеличен на 1rem */ word-spacing: -0.2em; /* интервал уменьшен на 0.2em */ word-spacing: 8px; /* интервал увеличен на 8px */ }
Тень для текста (text-shadow)
text-shadow – это CSS-свойство, с помощью которого можно добавить тень к тексту. При этом можно указать несколько теней. Отделение одной тени от другой выполняется посредством запятой.
Для описание тени необходимо указать смещения по осям x и у, радиус размытия и цвет. При этом задавать радиус размытия и цвет не обязательно. В этом случае тень будет отображаться без размытия (то есть с радиусом 0), а цвет определяться браузером.
По умолчанию смещения по x и y равны 0. Положительные значения по x и y смещают тень вправо и вниз, а отрицательные соответственно – влево и вверх.
.item-1 { text-shadow: 0.1em 0 #212121; } .item-2 { text-shadow: 0 0.1em #212121; } .item-3 { text-shadow: 0.1em 0.1em #212121; } .item-4 { text-shadow: 0.1em 0.1em 0.1em #212121; }Как выровнять текст по вертикали css
При изучении стилизации HTML-страниц и механизмов выравнивания элементов средствами CSS, начинающий разработчик, как правило, сначала знакомится со способами горизонтального выравнивания элементов. В их числе, например, text-align: center; и margin: 0 auto; . С выравниванием по вертикали возникает больше вопросов. В этой статье разберем пять способов выравнивания элементов в HTML и CSS по вертикали.
У каждого описанного способа есть свои преимущества и недостатки, поэтому подходить к их использованию стоит критически. В определенной ситуации один способ может подходить идеально, а другой — оказаться совершенно бесполезным.
1. У правила для горизонтального выравнивания текста text-align: center; , которое уже упоминалось выше, есть собрат, который называется vertical-align . Как и text-align , vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу.
Свойство vertical-align удобно применять, когда необходимо, например, выровнять иконку внутри строки или два рядом стоящих строчно-блочных элемента. Важно понимать, что vertical-align выравнивает элемент относительно содержащей строки, а не относительно ближайших элементов.
Кроме того, свойство vertical-align можно использовать для того, чтобы выравнивать контент в ячейке таблицы.
2. Для тех, кто не знаком с принципами работы интерлиньяжа и свойством line-height , может стать откровением, что текст располагается посередине содержащей его строки. Этим можно пользоваться при выравнивании. Предположим, что у вас есть элементарный footer, в котором нужно расположить по центру копирайт:
Допустим, что высота футера равна 80px. Для того, чтобы текст вертикально встал ровно по центру, достаточно написать в CSS следующее:
У этого способа есть недостаток. Его удобно применять, когда вы уверены, что выравниваемый элемент не будет переполняться. В противном случае при переносе строки между текстом появятся большие вертикальные отступы, что почти наверняка станет нежелаемым поведением.
3. Для предотвращения нежелаемного поведения, описанного в примере выше, можно использовать метод выравнивания: padding . Значения padding-top и padding-bottom помогут вам не только центрировать по вертикали, но и застраховаться от переполнения. Рассмотрим пример:
Предположим, вы верстаете кнопку, при нажатии на которую происходит переход на страницу заказа товара. Высота кнопки не должна превышать 50px. Из макета вы выгрузили следующие стили:
Высота контента внутри кнопки равна высоте строки и составляет 20px. Чтобы текст кнопки встал по центру, необходимо распределить по свойствам padding-top и padding-bottom оставшееся пространство следующим образом: (50px — 20px) / 2.
В результате получаем следующее:
Если текст кнопки измениться с «Заказать» на «Заказать товар онлайн» и перестанет помещаться на одной строке, кнопка сохранит нужный вид, а текст внутри неё по-прежнему будет находиться по центру.
Выравнивание при помощи padding универсально и подходит как для фразовых элементов, так и для выравнивания элементов с блочным типом бокса (но только в некоторых случаях).
4. Еще один инструмент — Flexbox. Внутри flex-контейнера любой элемент, будь то блочный, строчный или даже псевдоэлемент, становится flex-элементом, с которым можно производить любые манипуляции. В этой статье мы не будем подробно останавливаться на flex-свойств, почитать о них можно, например, тут.
У Flexbox есть ряд преимуществ перед обыкновенным выравниванием — в первую очередь это создание крупных сеточных структур и макросеток.
5. А что, если элемент абсолютно спозиционирован? Предположим, что вы сверстали модальное окно, которое нужно спозиционировать не относительно другого элемента, а относительно окна браузера. В этом случае можно использовать position: fixed; .
Стоит отметить, что все описываемые далее действия применимы и в случаях, когда нужно выполнить абсолютное позиционирование внутри другого элемента.
Положением спозиционированных элементов управляют свойства top , right , bottom , left . Попробуем следующее:
В данном случае модальное окно расположено не верно: ровно по центру находится левый верхний угол модального окна, а не его физический центр. Для того, чтобы выполнить его абсолютное позиционирование, изменим положение модального окна с помощью отрицательного margin :
У применения свойства margin в этой ситуации существует один недостаток. При изменении свойств width и/или height модального окна вам придется вручную «подкручивать» значения отрицательного margin , чтобы добиться половины размера его ширины и высоты. Этого можно избежать, используя вместо margin свойство transform . А transform: translate(X, Y) позволяет регулировать смещение элемента относительно исходного положение. Например, так:
В отличие от свойства margin , значения которого вычисляются от ширины родительского элемента, transform: translate(X, Y) берет за основу габариты самого элемента — в данном случае, модального окна. А это то, что нам и нужно. В результате, модальное окно будет всегда находиться в центре. Независимо от своих размеров.
Как вертикально центрировать текст с помощью CSS
Довольно часто выравнивание элементов по горизонтали может представлять трудность. Но есть много способов вертикального центрирования, которые очень легко применяются.
Используйте свойство vertical-align
Свойство vertical-align используется для вертикального центрирования строчных элементов.
Значения для vertical-align выравнивают элемент относительно родительского элемента.
- Значения line-relative вертикально выравнивают элемент относительно всей строки.
- Значения для ячеек таблицы относительны к table-height-algorithm, который обычно указывает на высоту строки.
Пример
Используйте CSS Flexbox
С Flexbox можно выровнять элементы по вертикали или по горизонтали с помощью свойств align-items, align-self, и justify-content.
Пример
Используйте CSS display:table
В данном методе мы отобразим элементы как таблицы и ячейки таблиц, и контент будет центрирован с помощью свойства vertical-align .
Пример
Используйте свойство line-height
Данный метод может быть использован для вертикального центрирования одной строки текста. Добавьте свойство line-height к элементу, содержащему текст, где высота строки больше, чем размер шрифта. По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста, и получится вертикально центрированный текст.
Пример
Следующий метод работает для одной строки или же нескольких строк текста, но этот метод требует фиксированной высоты контейнера.
Пример
Задайте равные верхние и нижние отступы
В этом методе верхние и нижние отступы родительского элемента будут равными
Пример
Если нужно задать отступы, используйте %. Данный метод требует некоторые вычисления, чтобы понять, какие значения необходимо установить для top и bottom для их динамического роста. Если установить относительную высоту, вычисления не потребуются.
Задайте абсолютное позиционирование и отрицательные поля
Этот метод используется с блочными элементами. Не забудьте установить высоту элемента, которую хотите центрировать.
- Задайте #parent и #child
- Задайте top: 50%; и left: 50%; для центрирования левого края child .
- Задайте child и таким образом, чтобы он перемещался вверх и налево.
- Установите отрицательное поле, оно уменьшает наполовину высоту и толщину.
Пример
Задайте абсолютное позиционирование и растягивание
С помощью этого метода, мы указываем, чтобы браузер автоматически задал поля дочернего элемента таким образом, чтобы они стали равными.
- Задайте parent и child
- Задайте child
- Задайте 4 margin: auto; все поля станут равными и child станет центрированным по вертикали, а также по горизонтали.
Пример
Задайте свойство transform
Если мы имеем position: absolute; left: 50%; top: 50%;, вычисления делаются с левого верхнего угла. Для центрированного позиционирования текста необходимо переместить текст на -50% налево и на 50% вверх с помощью transform: translate (-50%;-50%).
Пример
Используйте floater div
Этот метод требует пустой div, который будет floated.
Этот метод требует пустой div.
- Float: floater слева или справа.
- Задайте Height: 50%;
- Пустой дочерний элемент.
- Очистите child , используя clear: property.
Необходимо выставить дочерний элемент на расстоянии, равной половину высоты. Для этого нужно задать отрицательные значения свойства margin-bottom: на floater
vertical — align
Свойство vertical — align выравнивает текстовые элементы по вертикали относительно друг друга.
�� Для простого текста это не особо актуально, то вот для строчно-блочных ( inline — block ) элементов это свойство может быть очень полезным.
Пример
Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical — align они будут разной высоты:
Все три блока по умолчанию выровнялись по нижней границе. Это стандартное поведение. Изменим его и выровняем элементы по верхней границе:
Как понять
С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.
Как пишется
Значение свойства vertical — align чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.
Рассмотрим доступные значения на примере с котиком ��:
- baseline — значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.
- top — верхняя граница элемента находится на уровне верхней границы строки.
- middle — мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.
- bottom — выравнивает нижнюю границу элемента по уровню нижней границы строки.
- sub — удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:
- super — работает почти как sub , только поднимает базовую линию вверх.
text — bottom — выравнивает элемент по нижней точке текста с учётом выносных элементов.
text — top — верхняя часть элемента выравнивается по верхнему краю родителя:
Помимо ключевых слов можно использовать числовые значения.
Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз.
Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline . Процент рассчитывается от line — height родительского элемента.
Подсказки
�� Свойство vertical — align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.
�� На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально ��
�� Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.
На практике
Алёна Батицкая советует
�� Свойство vertical — align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text — align . И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.
�� С появлением флексбоксов выравнивание по вертикали производится при помощи align — items . Поэтому на свойство vertical — align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.
Выравнивание текста по вертикали. 5 способов
Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.
Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.
Первый метод с line-height
Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .
первый пример. демо №1
Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .
Пример. Демо №2
Выравнивание со свойством position
Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.
Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.
В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.
Выравнивание со свойством table
Выравнивание со свойством flex
Это идет уже более специфичный вариант со свойствами, которые не так часто встречаются в верстке сайта. Но, тем не менее они в редких случаях очень полезны.
Выравнивание со свойством transform
И последний в нашем списке, но далеко не последний в использовании способ. Сдвигаем по вертикали элемент на желаемое значение, в данном случае на -50%.
Похожие публикации:
- Как сделать матовым экран телевизора
- Как сделать секундомер в c windows forms
- Как сделать чтобы при наведении на картинку она подсвечивалась
- Как по английски жесткий диск