Как выровнять текст css
Перейти к содержимому

Как выровнять текст css

  • автор:

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег абзаца

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

Табл. 2. Выравнивание текста с помощью параметра align

Код HTML Описание

Текст

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

Текст

Выравнивание по центру.

Текст

Выравнивание по левому краю.

Текст

Выравнивание по правому краю.

Текст

Выравнивание по ширине.
Текст Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст

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

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.

Отличие между абзацем (тег

) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .

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

Пример 1. Выравнивание текста

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

Как поймать льва?

Метод перебора

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

Метод дихотомии

Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.

Результат примера показан на рис. 1.

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

Рис. 1. Выравнивание текста по правому и левому краю

В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.

Как сделать выравнивание по центру в HTML и CSS?

Как сделать выравнивание по центру в HTML и CSS?

Сегодня разберёмся как можно сделать в CSS и HTML выравнивание по центру. Мы рассмотрим несколько способов выравнивания текста.

Навигация по статье:

  • Как выровнять в html текст по центру?
  • Как выровнять текст по центру при помощи CSS?

Как выровнять в html текст по центру?

В HTML есть два варианта, которые не предполагают использование CSS.

  1. 1. Тег
    Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:
    • текст,
    • картинки,
    • ссылки,
    • а также теги , , , и некоторые другие.

Текст , который нужно выровнять по центру .
< h2 align = "center" >Выравнивание текста по центру при помощи HTML < / h2 > < / li >

Если у вас не срабатывает выравнивание заданное при помощи HTML, то, скорее всего, для этого блока уже задано выравнивание в CSS.

  • align=’»left’ — выравнивание текста по левому краю
  • align=’right’ – выравнивание по правому краю
  • align=’justify’ – выравнивание текста по ширине

Как выровнять текст по центру при помощи CSS?

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

Для этого у нас есть специальное свойство text-align, которое так же имеет несколько значений:

  • text-align: center; — для выравнивания по центру
  • text-align: left; — по левой стороне
  • text-align: right; — по правой стороне
  • text-align: justify; — по ширине блока или страницы.

Для того чтобы его применить к нашему тексту можно воспользоваться одним из предложенных вариантов:

    1. Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:

Выравнивание текста (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 CSS-свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. text-align не контролирует выравнивание элементов самого блока, но только их линейное содержимое.

Начальное значение start , или неназванное значение, которое действует как left , если direction : ltr или как right , если direction : rtl , а если start не поддерживается браузером.
Применяется к блочные контейнеры
Наследуется да
Обработка значения как указано, кроме значения match-parent , которое вычисляется вместо значения его родителя direction , а результаты в вычисленном значении left или right
Animation type discrete

Синтаксис

text-align =
start | (en-US)
end | (en-US)
left | (en-US)
right | (en-US)
center | (en-US)
justify | (en-US)
match-parent | (en-US)
justify-all

text-align: left text-align: right text-align: center text-align: justify text-align: start text-align: end text-align: match-parent text-align: start end text-align: "." text-align: start "." text-align: "." end text-align: inherit 

Значения

start Экспериментальная возможность

Подобно left если направление слева направо, и right если наоборот.

Подобно right если направление слева направо, и left если наоборот.

Линейное содержимое выравнивается по левому краю линейного блока.

Линейное содержимое выравнивается по правому краю линейного блока.

Линейное содержимое центрируется в линейном блоке.

Первое появление односимвольной строки — это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.

Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.

Наподобие inherit с различием, что значение start и end вычисляются в соответствии direction и заменяются соответствующим left или right значением.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *