Css vertical text padding

How to Vertically Center Text with CSS

Centering elements vertically with CSS often gives trouble. However, there are several ways of vertical centering, and each is easy to use.

Use the CSS vertical-align property

The vertical-align property is used to vertically center inline elements.

The values of the vertical-align property align the element relative to its parent element:

• Line-relative values vertically align an element relative to the entire line.
• Values for table cells are relative to the table-height-algorithm, which commonly refers to the height of the row.

It is important to note that it is possible to nudge text vertically up or down in CSS using the vertical-align property. This property sets the vertical alignment of an inline or table-cell element, and can be used to adjust the vertical position of text within its container.

Note that vertical-align only applies to inline or table-cell elements, so it may not work as expected on block-level elements such as or

. In such cases, you may need to wrap the text in an inline or table-cell element to apply vertical-align .

Example of vertically aligning a text:

html> html> head> title>Title of the document title> style> div < display: table-cell; width: 250px; height: 200px; padding: 10px; border: 3px dashed #1c87c9; vertical-align: middle; > style> head> body> div>Vertically aligned text div> body> html>

Источник

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

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

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

Сравним следующие подходы. Выравнивание с помощью:

• таблицы,
• отступов,
• line-height ,
• растягивания,
• отрицательного margin ,
• transform ,
• псевдоэлемента,
• flexbox .

Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

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

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

Выравнивание с помощью таблицы

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

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

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

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

Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H_outer – H_inner) / 2.

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

Выравнивание с помощью line-height

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

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

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

Выравнивание с помощью «растягивания»

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

1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
3. установить значение auto для вертикальных отступов внутреннего блока.

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

Минус данного способа — должна быть известна высота внутреннего блока.

Выравнивание с помощью отрицательного margin-top

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

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top : -H_inner / 2.

Минус данного способа — должна быть известна высота внутреннего блока.

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

Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.

Выравнивание с помощью псевдоэлемента

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

Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .

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

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

Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

Минус данного способа − Flexbox поддерживается только современными браузерами.

Какой способ выбрать?

Нужно исходить из постановки задачи:

• Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
• Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
• Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
• Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

Источник

Vertical text alignment in buttons and inputs

Have you ever struggled with vertically aligning the content of your interactive elements? You’re in good company. A lot of us do.

In this article, we’ll look at how to center the content of buttons and input elements using line-height, padding, and flexbox.

So, what’s our goal here?

We want to build a system where:

1. the content of buttons and input elements is perfectly aligned
2. buttons and input elements have the same height
3. font-size, line-height, padding, and border determine the size of buttons and inputs*

*An alternative approach would be setting a fixed height (e.g., height: 40px; ) and a line-height equal to the height value (e.g., line-height: 40px; ) for all buttons and inputs. However, using padding (instead of a fixed height) is safer because the button will adapt to its content under all circumstances.

Basic button and input style #

The height and vertical alignment of buttons and inputs is determined by the combination of borders, padding, font-size, and line-height.

With that in mind, let’s define the basic style of buttons and inputs:

 Button .btn, .form-control < /* reset user agent stylesheet */ background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; appearance: none; /* make sure properties affecting height have same value */ font-size: 1em; line-height: 1.2; padding: 0.5em var(--padding-x); border-width: 2px; border-style: solid; >/* button */ .btn < display: inline-flex; justify-content: center; /* center the content horizontally */ align-items: center; /* center the content vertically */ --padding-x: 1.2em; border-color: transparent; /* hide button border */ >/* input */ .form-control 

Takeaway points from the above snippet:

• We set the display value of the buttons equal to inline-flex so that we can use the justify-content and align-items properties to center the content (particularly handy if you place an icon inside a button).
• We apply the same vertical padding, font-size, line-height, and border-width to buttons and inputs.
• Even tough we don’t plan on adding a visible border to the buttons, we apply it anyway (with a transparent color) to make sure buttons and inputs have the same height.
• The line-height value needs to be slightly bigger than «1» . If you use «1», the input elements won’t accept it, and they’ll be taller than the buttons. In our example, we’re applying «1.2» (you could use «normal» if you prefer).

This basic style will ensure buttons and input elements have the same height and that their content is vertically aligned. You can modify their font-size (e.g., set a fixed font-size) or apply a different font-family, and it won’t affect the alignment. After all, we’re just pushing the content using padding and border.

You can also scale them up/down taking advantage of the Em units.

Make ’em pretty #

All left to do is creating a bespoke theme for our buttons and inputs:

Exceptions #

There may be cases where we need to set a fixed height for our button/input elements, and the default line-height will break the alignment.

In such cases, we can remove the vertical padding and set the line-height equal to the height value.

Here’s a workaround based on creating height utility classes that behaves slightly differently when applied to buttons and inputs:

.height-30, .height-40, .height-50 < height: var(--height); &.btn, &.form-control < line-height: var(--height); padding-top: 0; padding-bottom: 0; >> .height-30 < --height: 30px; >.height-40 < --height: 40px; >.height-50

Feedback? #

Do you use a different method you’d like to share? Let us know on Twitter!

Cookie Compliance

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.

Источник