Выравнивание текста и блоков

Текст

Свойство text-align производит горизонтальное выравнивание текста внутри элемента. При этом сам элемент не перемещается.

text-align: left - по левому краю (значение по умолчанию)

text-align: right - по правому краю

text-align: center - по центру элемента

text-align: justify - по ширине

Пример:

Стиль:

div
  {
  border: 1px solid Red;
  }

HTML код:

<div style="text-align: right">Текст справа</div>

К текстовым элементам можно применять свойство vertical-align. Но оно производит вертикальное выравнивание не относительно внешнего элемента, а относительно его базовой линии. Поэтому для выравнивания текста это свойство использовать не удобно.

Ячейки таблицы

Свойства text-align и vertical-align можно использовать для выравнивания внутри ячеек таблицы. Для ячеек vertical-align принимает такие значения:

vertical-align: middle - по центру (значение по умолчанию)

vertical-align: top - по верхнему краю

vertical-align: bottom - по нижнему краю

Это свойство производит вертикальное выравнивание всего содержимого ячейки, включая текстовые и блочные элементы. А text-align применяется только к тексту. Пример:

Стиль:

td
  {
  border: 1px solid Red;
  width: 200px;
  height: 180px;
  }

HTML код:

<table>
  <tr>
    <td style="text-align: right; vertical-align: top">Текст</td>
    <td style="text-align: center; vertical-align: bottom">Текст</td>
</tr></table>

Блоки

Есть ещё один способ выравнивания блоков. Можно указать размер блока и внешние отступы в процентах от внешнего элемента. Это можно использовать для горизонтального и вертикального выравнивания. Только при вертикальном выравнивании высота внешнего блока должна быть задана напрямую. Нужно учитывать что размер экрана может быть маленьким, поэтому дополнительно можно указать минимальный размер блока.

<div style="width: 30%; margin-left: 30%">Блок с отступом</div>

Если какому-то отступу установить значение auto, то отступ займёт всё доступное пространство. Это позволяет расположить блок справа. А если это значение указать левому и правому отступу, то пространство делится между ними пополам, и блок оказывается в центре.

Стиль:

#to_center
  {
  width: 170px;
  margin-left: auto;
  margin-right: auto;
  }

HTML код:

<div id="to_center">Блок в центре</div>