Выравнивание текста в HTML с применением стилей CSS

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

Вариантов решить задачу предостаточно, но в данной статье, я собрал наиболее понравившиеся с применением HTML и стилей CSS.

Выравнивание текста по горизонтали HTML & CSS:
Выравнивание текста по вертикали HTML & CSS:

Выравнивание текста по горизонтали HTML & CSS

Когда я начинал изучать HTML, чтобы выровнять текст по горизонтали, нужно было обернуть объект в тег <center>, а если по правому или левому краю, то <p align="right"> или <p align="left"> соответственно.

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

Выровнять текст по правому краю тегом «text-aling:right;»

Код HTML:

<div id="wrapper">
<p>Данный текст будет выровнен по правому краю.</p>
</div>

Код CSS:

#wrapper{
border:1px solid #000;
width:500px;
}
p{
text-align:right;
}

Результат: https://jsfiddle.net/k6g1phmf/.

Выровнять текст по левому краю тегом «text-aling:left;»

По умолчанию, текст изначально выровнен по левому краю, но иногда приходится явно указывать это.
Код HTML:

<div id="wrapper">
<p>Данный текст будет выровнен по левому краю.</p>
</div>

Код CSS:

#wrapper{
border:1px solid #000;
width:500px;
}
p{
text-align:left;
}

Результат: https://jsfiddle.net/k6g1phmf/1/.

Выравнивание текста по центру тегом «text-aling:center;»

Если хотим сделать какой то заголовок, который должен располагаться по центру, используем следующий вариант:

Код HTML:

<div id="wrapper">
<h1>Заголовок, который будет по центру</h1>
<p>Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте.</p>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:500px;
}
h1{text-align:center;}
p{
  text-align:left;
}

Результат: https://jsfiddle.net/k6g1phmf/2/.

Как выровнять текст по ширине тегом «text-aling:justify;»

Одно время было принято размещать текст в статье по всей ширине страницы. Если углубиться в вопрос, то достигается это при помощи увеличения пробелов между словами, а в CSS при помощи text-aling:justify;.

Код HTML:

<div id="wrapper">
<h1>Заголовок, который будет по центру</h1>
<p>Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте.</p>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:500px;
}
h1{text-align:center;}
p{
  text-align:justify;
}

Результат: https://jsfiddle.net/k6g1phmf/1/.

Выравнивание таблицы созданной в HTML

Рассмотрим ситуацию, в которой нужно центрировать созданную в HTML таблицу на экране или внутри блока. Отличный способ использовать margin: 10px auto;. Тем самым мы говорим, что сверху и снизу должен быть отступ 10px, а по краям, рассчитывается автоматически, поэтому таблица располагается по центру.

Код HTML:

<div id="wrapper">
<table border="1">
<tr>
  <td>№ п/п</td>
  <td>Фамилия</td>
  <td>Расход</td>
  <td>Приход</td>
</tr>
<tr>
  <td>1</td>
  <td>Иванов</td>
  <td>3 540 руб.</td>
  <td>10 084 руб.</td>
</tr>
<tr>
  <td>2</td>
  <td>Петров</td>
  <td>1 730 руб.</td>
  <td>8 294 руб.</td>
</tr>
<tr>
  <td>3</td>
  <td>Сидоров</td>
  <td>6 890 руб.</td>
  <td>12 244 руб.</td>
</tr>
</table>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:500px;
}
table{margin: 10px auto;}

Результат: https://jsfiddle.net/k6g1phmf/4/.

Теперь обратимся к ячейкам таблицы и расположим текст для наглядности по разным краям.

И снова, можно прописать для каждой ячейки <td valign="center" align="center">Текст по центру ячейки</td>, где

valign=»center» — выравнивание по вертикали,
align=»center» — выравнивание по горизонтали,

но что делать, если появилась необходимость изменить дизайн. Заново переписывать каждый пункт? Поэтому снова воспользуемся CSS и присвоим классы к ячейкам.

Как выровнять текст в таблице по правому краю

Код HTML:

<div id="wrapper">
<table border="1">
<tr>
  <td class="center">№ п/п</td>
  <td class="left">Фамилия</td>
  <td class="right">Расход</td>
  <td class="justify">Приход</td>
</tr>
<tr>
  <td class="center">1</td>
  <td class="left">Иванов</td>
  <td class="right">3 540 руб.</td>
  <td class="justify">10 084 руб.</td>
</tr>
<tr>
  <td class="center">2</td>
  <td class="left">Петров</td>
  <td class="right">1 730 руб.</td>
  <td class="justify">8 294 руб.</td>
</tr>
<tr>
  <td class="center">3</td>
  <td class="left">Сидоров</td>
  <td class="right">6 890 руб.</td>
  <td class="justify">12 244 руб.</td>
</tr>
</table>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:600px;
}
table{margin: 10px auto;}
.center, .left, .right, .justify{width:130px;}
.center, .left, .right, .justify{text-align:right;}

Результат: https://jsfiddle.net/k6g1phmf/5/.

Как выровнять текст в таблице по левому краю

Код HTML:

<div id="wrapper">
<table border="1">
<tr>
  <td class="center">№ п/п</td>
  <td class="left">Фамилия</td>
  <td class="right">Расход</td>
  <td class="justify">Приход</td>
</tr>
<tr>
  <td class="center">1</td>
  <td class="left">Иванов</td>
  <td class="right">3 540 руб.</td>
  <td class="justify">10 084 руб.</td>
</tr>
<tr>
  <td class="center">2</td>
  <td class="left">Петров</td>
  <td class="right">1 730 руб.</td>
  <td class="justify">8 294 руб.</td>
</tr>
<tr>
  <td class="center">3</td>
  <td class="left">Сидоров</td>
  <td class="right">6 890 руб.</td>
  <td class="justify">12 244 руб.</td>
</tr>
</table>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:600px;
}
table{margin: 10px auto;}
.center, .left, .right, .justify{width:130px;}
.center, .left, .right, .justify{text-align:left;}

Результат: https://jsfiddle.net/k6g1phmf/6/.

Как выровнять текст в таблице по ширине

Код HTML:

<div id="wrapper">
<table border="1">
<tr>
  <td class="center">№ п/п</td>
  <td class="left">Фамилия</td>
  <td class="right">Расход</td>
  <td class="justify">Приход</td>
</tr>
<tr>
  <td class="center">1</td>
  <td class="left">Иванов</td>
  <td class="right">3 540 руб.</td>
  <td class="justify">10 084 руб.</td>
</tr>
<tr>
  <td class="center">2</td>
  <td class="left">Петров</td>
  <td class="right">1 730 руб.</td>
  <td class="justify">8 294 руб.</td>
</tr>
<tr>
  <td class="center">3</td>
  <td class="left">Сидоров</td>
  <td class="right">6 890 руб.</td>
  <td class="justify">12 244 руб.</td>
</tr>
</table>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:600px;
}
table{margin: 10px auto;}
.center, .left, .right, .justify{width:130px;}
.center, .left, .right, .justify{text-align:justify;}

Результат: https://jsfiddle.net/k6g1phmf/7/.

Как выровнять текст в таблице по центру

Код HTML:

<div id="wrapper">
<table border="1">
<tr>
  <td class="center">№ п/п</td>
  <td class="left">Фамилия</td>
  <td class="right">Расход</td>
  <td class="justify">Приход</td>
</tr>
<tr>
  <td class="center">1</td>
  <td class="left">Иванов</td>
  <td class="right">3 540 руб.</td>
  <td class="justify">10 084 руб.</td>
</tr>
<tr>
  <td class="center">2</td>
  <td class="left">Петров</td>
  <td class="right">1 730 руб.</td>
  <td class="justify">8 294 руб.</td>
</tr>
<tr>
  <td class="center">3</td>
  <td class="left">Сидоров</td>
  <td class="right">6 890 руб.</td>
  <td class="justify">12 244 руб.</td>
</tr>
</table>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:600px;
}
table{margin: 10px auto;}
.center, .left, .right, .justify{width:130px;}
.center, .left, .right, .justify{text-align:center;}

Результат: https://jsfiddle.net/k6g1phmf/8/.

Выравнивание блока «div» по центру используя CSS

Рассмотрим несколько вариантов выравнивания блока div относительно родительского блока.

В ситуации, когда дочерний блок div не имеет размеров, достаточно сделать так:

Код HTML:

<div id="wrapper">
<div class="box">
Этот блок расположен по центру
</div>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:600px;
  text-align:center;
}
.box{background-color:#ff0;}

Результат: https://jsfiddle.net/k6g1phmf/10/.

Это самый простой случай. В практике такое встречается, но не так часто как рассмотренные ниже примеры.

Как выровнять блок «div» определенной ширины

Предположим, у нас есть дочерний блок div с установленной шириной. В этом случае, самый простой способ центрировать блок, задать ему margin: auto, рассмотренный ранее.

Код HTML:

<div id="wrapper">
<div class="box">
Этот блок расположен по центру
</div>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:600px;
  text-align:center;
}
.box{
  background-color:#ff0;
  width:150px;
  margin:0 auto;}

Результат: https://jsfiddle.net/k6g1phmf/11/.

Как выровнять внутренний блок «div»

Еще один способ, использовать относительное позиционирование.

Код HTML:

<div id="wrapper">
<div class="box">
Этот блок расположен по центру
</div>
</div>

Код CSS:

#wrapper{
  border:1px solid #000;
  width:600px;
  position: relative;
}
.box{
  background-color:#ff0;
  width:150px;
  position: absolute;
  left: 50%;
  margin-left: -75px;
}

Результат: https://jsfiddle.net/k6g1phmf/12/.

Как выровнять несколько блоков «div» относительно родительского

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

Код HTML:

<div id="wrapper">
<div class="main">
Главная
</div>
<div class="htmlcss">
HTML & CSS
</div>
<div class="PHP">
PHP
</div>
<div class="js">
JavaScript
</div>
</div>

Код CSS:

#wrapper {
  width: 600px;
  text-align: center;
}
.main, .htmlcss, .PHP, .js {
  display: inline-block;
  text-decoration: underline;
  color: #66CDAA;
  padding: 10px 10px;
}

Результат: https://jsfiddle.net/k6g1phmf/13/.

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

Выравнивание текста по вертикали HTML & CSS

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

создании различных дизайнов кнопок;
выравнивании разной величины блоков находящихся на одной линии;
вертикальное выравнивание текстов, с разным количеством строчке;
и еще в 100500 случаях.

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

Вертикальное центрирование текста с помощью тега «line-height»

Приведу пример создания кнопки стилями CSS.

Код HTML:

<div id="wrapper">
<div class="button">
Скачать
</div>
</div>

Код CSS:

#wrapper {
}
.button {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  border-radius: 4px;
  color: #555555;
  width:120px;
  margin: 20px auto;
  font-size: 14px;
  text-align:center;
  height: 40px;
  line-height: 40px;
}
.button:hover, a.button:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0 none;
}

Результат: https://jsfiddle.net/k6g1phmf/14/.

Самые главные строчки, которые изучаем в данном примере, это height: 40px; и line-height: 40px;. Height, это высота кнопки, а тег line-height, указывает на межстрочный интервал сверху и снизу. В результате, название кнопки располагается по центру.

Выравнивание блока по вертикали внутри родительского блока с применением отрицательного «margin»

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;  
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: #00f;
  color: white;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/15/.

Вертикальное выравнивание по типу таблицы

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  display: table;
}
.content {
  background: #f09d06;
  color: white;
  width: 300px;
  display: table-cell;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}

Результат: https://jsfiddle.net/k6g1phmf/18/.

Вертикальное выравнивание блока тегом «transform»

В том случае если не известен размер родительского блока, можно сделать такой трюк:

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);
  resize: vertical;
  overflow: auto;
}

Результат: https://jsfiddle.net/k6g1phmf/16/.

Выравнивание по вертикали с использованием «display:flex»

На сегодняшний день, самый лучший способ центрирования текста по вертикали в CSS, использование flex-верстки. Все что нужно сделать, это задать родительскому блоку тег display: flex и указать свойства align-items и justify-items.

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/17/.

Теперь вы знаете как выровнять текст в CSS. Материал получился объемный, но зато очень полезный. Выравнивание текста и блоков посредством CSS, первостепенные знания, без которых не получится адекватно сверстать сайт.

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

Изучаете HTML и CSS? Пройдите курс от профессионального программиста!

Интересненько!
Нужно срочно изучить!