Как выровнять по левому краю html

Выравнивание текста отвечает за его внешний вид, формирование краев абзаца. Обычно текст обрамляют тегами или и затем применяют css свойство text-align со следующим значением:

• по левому краю - left
• по правому краю - right
• по центру - center
• по ширине - justify

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

Исходный HTML-файл:

<p>Этот текст по умолчанию займет левое вырывание</p>
<p class="center">Пример текста с выравниваем по центру</p>
<p class="right">Пример текста с выравниваем по правому краю</p>
<p class="justify">
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине
</p>

Стили:

.center {
  text-align: center;
}

.right {
  text-align: right;
}
 
.justify {
  text-align: justify;
}

Чтобы выровнять текст по левому краю в HTML, можно использовать атрибут justify-content: flex-start. Это свойство мы можем использовать только когда контейнер у нас display: flex, что очень часто.

Код выглядит так:

<div>
   <span>Шрифт</span>
</div>

Текст выравнивают по левому краю CSS-свойством text-align: left:

<p class="text">Текст по левому краю</p>

По умолчанию текст на русском и английском и так выравнивается по левому краю. Если он стоит по центру, ищите, где родителю задали text-align: center — свойство наследуется.

Атрибут align="left" из старых учебников устарел. Используйте CSS.

Блок по левому краю

text-align выравнивает содержимое строки: текст, картинки, кнопки. Сам блок с заданной шириной прижимают влево отступами:

.card {
  width: 300px;
  margin-right: auto; /* блок прижмётся к левому краю */
}

Если блок стоит по центру из-за margin: 0 auto, уберите левый auto.

Внутри flex-контейнера

.row {
  display: flex;
  justify-content: flex-start; /* элементы прижаты к левому краю */
}

justify-content работает только у элемента с display: flex или grid.

Выравнивание с учётом направления письма

text-align: start прижимает текст к началу строки: в русском — к левому краю, в арабском и иврите — к правому. Для многоязычных сайтов это надёжнее, чем left.

По ширине

.text {
  text-align: justify;
}

Текст растянется на всю ширину строки. На узких экранах между словами появляются большие пробелы, поэтому justify используют вместе с hyphens: auto.

Вёрстку разбирают в курсе «Профессиональная вёрстка».