Как расположить текст слева html

Выравнивание текста (text-align) в HTML

Рассмотрим несколько примеров по выравниванию текста внутри контейнера. Начнём с вываривания по левому краю, которое происходит автоматически.

text-align: left

Рассмотрим HTML код контейнера с текстом:

 Тише, мыши, кот на крыше.

Контейнер div по умолчанию является блочным элементом, поэтому его ширина составляет 100% от родительского элемента (элемента, в котором он находится). Поэтому в этой статье его удобно применять — текст будет перемещаться по контейнеру в зависимости от значения свойства text-align. Результат будет такой:

Тише, мыши, кот на крыше.

Выравнивание по левому краю не всегда делается по умолчанию. К примеру, в некоторых языках написание слов происходит справа налево. Если текст в контейнере написан на таком языке, то по умолчанию выравнивание будет по правому краю.

В примере выше использован CSS код внутри атрибута style тега div. Но можно вынести этот код отдельно:

text-align: right

Теперь посмотрим как принудительно сделать выравнивание по правому краю

 Тише, мыши, кот на крыше.

Текст будет выравнен по правому краю контейнера:

Тише, мыши, кот на крыше.

text-align: center

Существует возможность выравнить текст по центру. Для этого необхоимо использовать значение «center»

 Тише, мыши, кот на крыше.

Текст будет выравнен по центру контейнера:

Тише, мыши, кот на крыше.

text-align: justify

Стоит упомянуть о возможности растянуть текст равномерно на всю ширину контейнера. Сделать это можно с помощью значения «justify». Но чтобы продемонстрировать это, зададим два контейнера с ограниченной шириной (max-width: 250px). В одном контейнере оставим стандартные настройки выравнивания, а во втором пропишем text-align:justify:

 Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
 Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

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

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

В примере выше использовано свойство «max-width«, а не «width«, потому что оно не мешает контейнеру быть уже, чем заданное значение. Это удобно, если пользователь просматривает сайт с мобильного телефона, ширина которого менее зданного значения. Благодаря «max-width» вёрстка сайта не сломается — страница не будет уходить за пределы экрана.

Свойство text-align, горизонтальное выравнивание текста

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

Свойство может принимать следующие значения:

left — выравнивание по левому краю блока, это значение по умолчанию;
right — по правому краю блока;
center — по центру блока;
justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер «растягивает» слова в строке).

Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:

HTML:

Я текст внутри абзаца

CSS: p

На самом деле существует ещё два значения text-align : это выравнивание к началу блока start и выравнивание к концу блока end . Если вы попробуете применить эти значения, то увидите, что эффект от значения start совпадает со значением left , а end делает то же самое, что и right .

Но это не всегда так. Дело в том, что не во всех языках текст пишется слева направо. Например, в японском текст пишется сверху вниз, и в этом случае значения left и right уже не так логичны, как в «европейских» языках.

Именно чтобы сделать CSS-код универсальным для любых направлений написания текста и появились такие значения text-align . Кстати, для управления направлением текста есть специальное свойство — writing-mode.

Перейти к заданию

index.html Сплит-режим
style.css Сплит-режим

Выравнивание текста в HTML

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

1. Через использование атрибута «align» c параметрами — «left»,»left»,»right».

Текст по центру
 Текст слева
 Текст справа

Текст по центру

2. Правильней делать это через CSS свойством выравнивания «text-align» с аналогичными параметрами «left»,»left»,»right».

Текст по центру
 Текст слева
 Текст справа

В результате получим тоже самое:

Текст по центру

А лучше стили писать в отдельном файле, простой пример:

Ненумерованный список
Ненумерованный список

Нумерованный список
Нумерованный список

HTML выравнивание текста по центру, ширине и отступ

В примере ниже показано, как выровнить текст по ширине страницы:

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

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

Выравнивание текста в HTML по центру и по ширине

Выравнивание текста в HTML по центру, текст справа:

Выравнивание текста в HTML, текст по центру, справа страницы

Текст выровнен по левому краю страницы.

Текст справа страницы.

Текст выровнен по центру, розового цвета, размером в 30 пикселей.

Выравнивание, ХТМЛ tekst справа, по центру, по ширине, otstup teksta

Атрибуты и значения

align=»left» – определяет выравнивание текста слева (по умолчанию).
align=»center» – выравнивает текст по центру.
align=»right» – выравнивает текст справа.

Выравнивание | HTML отступ текста

HTML текст и его отступ слева страницы

Произведем отступ текста слева двумя способами:

HTML отступ текста слева страницы

Отступ слева с использованием тегов.

Отступ слева с использованием CSS атрибута.

Otstup teksta в ХТМЛ

В первом случае отступ строки был произведен тегами , а во втором случае – с помощью CSS атрибута text-indent , значения которого устанавливаются в пикселях и могут иметь любую величину, что бывает очень удобно.

Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML текст HTML отступ, текст по центру, по ширине HTML перенос