CSS

text-align, line-height

Когда мы пишем текст, он всегда изначально выравнивается по левому краю, но с помощью CSS мы можем изменять выравнивание. Для этого необходимо использовать CSS-свойство, которое называется «text-align».

.box{
  text-align: right;
}

Изначально задается свойство «left», то есть оно не задано, оно предполагается. Если мы хотим сделать что-нибудь другое, то мы пишем «text-align: right», сохраняем, смотрим, и текст выравнивается по правому краю.

Ещё одно значение, которое мы можем задать – это «text-align: center», тогда текст выравнивается по центру.

Есть ещё одно интересное значение этого свойства – «justify». Это когда текст выравнивается по ширине. 

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

В этом же уроке давайте затронем ещё одно CSS-свойство, тоже очень простое, ничего сложного в нем нет. Оно называется «line-height». Это высота строки, то есть мы можем изменять высоту строки.

.box{
  line-height: 20px;
}

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

Допустим, вы делаете кнопку, и вам нужно текст разместить по центру. Допустим, это какая-то кнопочка «Отправить».

<div class='button'>Отправить</div>

.button{
  background: #ddd;
  height:40px;
  line-height:40px;
  text-align: center;
  width:300px;
  border-radius: 5px;
  cursor: pointer;
}

Этот код сделает для нас вот такую кнопочку:

То есть с помощью «line-height: center», «text-align: center» вы можете выравнивать текст по центру какого-то блока.

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

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