Css выровнять текст по левому краю: Выравнивание текста в CSS

Содержание

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

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

left — выравнивает текст по левому краю.
right — выравнивает текст по правому краю.
center — выравнивает текст по центру.
justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2 { text-align:center; }
      p.date { text-align:right; }
      p.main { text-align:justify; } /*значение justify растягивание текста по ширине*/
      p { text-indent:30px; } /*задаем размер отступа для первой строки абзаца*/
    </style>
  </head>

  <body>
    <h2>Пример выравнивания текста</h2>
    <p>февраль, 2012</p>
    <p>Помимо выравнивания текста, для первой строки абзаца был задан небольшой 
    отступ, который визуально добавляет "красную строку" к тексту. Этот эффект очень 
	 пригодится на страницах с большими объемами текста, облегчая визуальное восприятие.</p>
  </body>
</html>

Попробовать »

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

С этой темой смотрят:

text-align | htmlbook.ru

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

CSS2.1	`text-align: center \| justify \| left \| right \| inherit`
CSS3	`text-align: center \| justify \| left \| right \| start \| end`

Значения

center: Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left: Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right: Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
auto: Не изменяет положение элемента.
inherit: Наследует значение родителя.
start: Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end: Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div><div>Выравнивание по левому краю</div></div>
  <div><div>Выравнивание по центру</div></div>
  <div><div>Выравнивание по правому краю</div></div>
 </body>
</html>

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

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(«elementID»).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Выравнивание текста | htmlbook.ru

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

Табл. 1. Способы выравнивания текста
Выравнивание по левому краю	Выравнивание по правому краю	Выравнивание по центру	Выравнивание по ширине
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

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

Табл. 2. Выравнивание текста с помощью параметра align
Код HTML	Описание
<p>Текст</p>	Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
<p align=»center»>Текст</p>	Выравнивание по центру.
<p align=»left»>Текст</p>	Выравнивание по левому краю.
<p align=»right»>Текст</p>	Выравнивание по правому краю.
<p align=»justify»>Текст</p>	Выравнивание по ширине.
<nobr>Текст</nobr>	Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст<wbr>	Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr>.
<div align=»center»>Текст</div>	Выравнивание по центру.
<div align=»left»>Текст</div>	Выравнивание по левому краю.
<div align=»right»>Текст</div>	Выравнивание по правому краю.
<div align=»justify»>Текст</div>	Выравнивание по ширине.

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

Отличие между абзацем (тег <p>) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание текста</title>
 </head>
 <body>
  <h2 align="center">Как поймать льва?</h2> 
  <p align="right"><strong>Метод перебора</strong></p> 
  <p>Делим пустыню на ряд элементарных участков, размер которых совпадает 
  с габаритными размерами льва, но при этом меньше размера клетки. Далее простым 
  перебором определяем участок, в котором находится лев, что автоматически приводит 
  к его поимке.</p>
  <p align="right"><strong>Метод дихотомии</strong></p>
  <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. 
  Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем 
  до тех пор, пока лев не окажется пойман.</p>
 </body>
</html>

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

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

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

Выравнивание текста на CSS | Трепачёв Дмитрий

Сейчас мы с вами научимся выравнивать текст. Для этого используется свойство text-align. Текст можно выравнять по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому, и по левому краю (значение justify).

Давайте посмотрим на примерах.

Значение right

Выровняем текст в абзацах по правому краю:

<p> абзац с текстом </p> p { text-align: right; }

Значение center

А теперь выровняем по центру:

<p> абзац с текстом </p> p { text-align: center; }

Значение left

А вот значение left для абзацев можно и не ставить — они по умолчанию и так выровнены по левому краю. Однако есть элементы, которые по умолчанию стоят по центру (это, например, теги th, которые делают ячейку-заголовок таблицы). И вот для них как раз-таки и может потребоваться выравнивание по левой стороне. Сделаем это:

<table border="1"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> <td>200$</td> </tr> <tr> <td>Николай</td> <td>Петров</td> <td>300$</td> </tr> </table> th { text-align: left; } table { width: 400px; }

Значение justify

Ну, и наконец выровняем текст одновременно и по правому, и по левому краю. Этот эффект можно увидеть только при наличии достаточно длинного текста:

<p> длинный текст... </p> p { text-align: justify; width: 300px; }

Практика

Скопируйте себе следующий HTML код и решите для него приведенные ниже задачи:

<h2>Главный заголовок страницы</h2> <table border="1"> <tr> <th>Продукт</th> <th>Цена</th> <th>Количество</th> </tr> <tr> <td>Яблоки</td> <td>100</td> <td>5кг</td> </tr> <tr> <td>Апельсины</td> <td>200</td> <td>6кг</td> </tr> <tr> <td>Бананы</td> <td>300</td> <td>7кг</td> </tr> </table> <h3>Второстепенный заголовок 1</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire aenean a dapibus magna, ac interdum nisl. Suspendisse egetil fringilla nibh, eu commodo arcu. Donec lacinia tempor velite sed tincidunt. Aliquam porttitor nulla purus, vel vulputater ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi ante purus lacini dui, interdum fringilla massa eros ut duir. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire aenean a dapibus magna, ac interdum nisl. Suspendisse egetil fringilla nibh, eu commodo arcu. Donec lacinia tempor velite sed tincidunt. Aliquam porttitor nulla purus, vel vulputater ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi ante purus lacini dui, interdum fringilla massa eros ut duir. </p> <h3>Второстепенный заголовок 2</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire aenean a dapibus magna, ac interdum nisl. Suspendisse egetil fringilla nibh, eu commodo arcu. Donec lacinia tempor velite sed tincidunt. Aliquam porttitor nulla purus, vel vulputater ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi ante purus lacini dui, interdum fringilla massa eros ut duir. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire aenean a dapibus magna, ac interdum nisl. Suspendisse egetil fringilla nibh, eu commodo arcu. Donec lacinia tempor velite sed tincidunt. Aliquam porttitor nulla purus, vel vulputater ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi ante purus lacini dui, interdum fringilla massa eros ut duir. </p> <h3>Второстепенный заголовок 3</h3> <table border="1"> <tr> <td>ячейка 1</td> <td>ячейка 2</td> <td>ячейка 3</td> </tr> <tr> <td>ячейка 4</td> <td>ячейка 5</td> <td>ячейка 6</td> </tr> <tr> <td>ячейка 7</td> <td>ячейка 8</td> <td>ячейка 9</td> </tr> </table>

Поставьте все заголовки h2 по правому краю.

Поставьте все заголовки h3 по центру.

Установите всем таблицам ширину в 500px.

Поставьте текст в ячейках th по левому краю.

Поставьте текст в ячейках td по центру.

Установите всем абзацам ширину в 300px.

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

Установите заголовкам h3 ширину в 300px. Поставьте их по центру. Обратите внимание на то, что центрирование будет происходить внутри этих 300px.

выравнивание текста по горизонтали — учебник CSS

В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:

Как необходимо выровнять текст?	Подходящее значение
По левому краю	left
По правому краю	right
По центру страницы/блока	center
По ширине страницы/блока	justify
Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю)	start
Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю)	end

Пример записи стиля:


p {
text-align: left;
}

Как выровнять текст при помощи HTML

Серёжа СыроежкинКопирайтер

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

Существует три способа выровнять текст с помощью HTML-кода:

При помощи атрибута тега p;
Выравнивание по центру при помощи тега center;
Выравнивание при помощи блоков div.

Выравнивание по краям HTML

По краям текст можно выровнять как при помощи тега p, так и при помощи тега div. Для этого используется атрибут align:

align=”right” – по правому краю;
align=”left” – по левому краю;

Например:

<p align="right">Конструктор сайтов "Нубекс"</p>
<div align="left">Конструктор сайтов "Нубекс"</div>

Здесь первое предложение выравнивается по правому краю при помощи тега p, второе – по левому краю при помощи тега div.

Выравнивание по ширине HTML

По ширине текст также может быть выравнен при помощи тегов p и div:

<p align="justify">Конструктор сайтов "Нубекс"</p>
<div align=" justify ">Конструктор сайтов "Нубекс"</div>

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

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

<p align="center">Конструктор сайтов "Нубекс"</p>
<div align=" center ">Конструктор сайтов "Нубекс"</div>
<center>Конструктор сайтов "Нубекс"</center>

Выравнивание CSS

Конечно, более «красиво» делать выравнивание с помощью CSS. Рассмотрим способ выравнивания текста при помощи CSS:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание текста с помощью CSS</title>
  <style>
  .right {
  text-align: right;
  }
  </style>
 </head>
 <body>
<div>Конструктор сайтов "Нубекс"</div>
 </body>
</html>

Здесь происходит выравнивание текста по правому краю при помощи атрибута CSS text-align.

Смотрите также:

Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие) : WEBCodius

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие, предназначенные для оформления текста html.

В прошлой статье мы рассмотрели свойства font-family, font-size, color и другие атрибуты CSS, которые позволяют задавать параметры шрифтов. Если вы впервые слышите о CSS, то обязательно прочтите статью о назначении каскадных таблиц стилей.

Выравнивание текста с помощью CSS

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

Доступные значения этого правила определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

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

Примеры использования свойства:

Следующее свойство CSS text-ident задает отступ для красной строки, например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

Далее рассмотрим вертикальное выравнивание — свойство vertical-align. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

Рассмотрим каждое значение подробнее:

baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
top — выравнивание фрагмента текста по верхнему краю родительского элемента;
text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
middle — выравнивание центра фрагмента текста по центру родительского элемента;
bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

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

top — для выравнивания содержимого по верхней границе ячейки;
bottom — для выравнивания содержимого по нижней границе ячейки;
middle — для выравнивания по центру ячейки (используется по умолчанию).

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

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre», помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

Использование значения «pre», будет полной аналогией при применении тега «pre». Браузер будет отображать страницу с учетом всех лишних пробелов и переносов, как они были добавлены разработчиком. Если строка текста получиться слишком длинной, то будет добавлена горизонтальная полоса прокрутки.

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

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

Пример использования:

Далее рассмотрим параметр word-wrap, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:

Параметры тени у текста — свойство text-shadow

Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web страницу. Синтаксис:

Значение none отменяет добавление тени у текста и установлено по умолчанию.

Цвет тени задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.

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

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

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

Рассмотрим пример:

И вот так будет выглядеть текст абзаца p с применением данного правила стиля в Internet Explorer 11:

На этом буду завершать статью. Чтобы узнать больше о свойствах CSS не забудьте подписаться на обновления блога и читайте статьи из раздела «Справочник CSS». До новых встреч!

выравнивание текста | htmlbook.ru

CSS	Internet Explorer		Хром	Opera	Safari	Firefox	Android	iOS
2,1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Опет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

CSS2.1

  выравнивание текста: по центру | оправдать | слева | право | унаследовать

CSS3

  выравнивание текста: по центру | оправдать | слева | право | начало | конец

Значения

центр: Выравнивание текста по центру. Текст помещается по центру горизонтали окна Приложите или контейнер, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы.Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру по той причине, что используется что читать большой объем такого текста неудобно.
оправдать: Выравнивание по ширине, что означает одновременное выравнивание по левому краю и правому краю. Чтобы это запустить браузер в этом случае пробелы между словами.
слева: Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край «лесенкой». Такой способ выравнивания является наиболее популярным на сайтех, поскольку позволяет пользователю легко отыскивать взглядом новую и комфортно читать большой текст.
правый: Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу.А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
авто: Не изменяет положение элемента.
наследовать: Наследует значение родителя.
начало: Аналогично значению влево, если текст идёт справа налево, когда текст идёт справа налево.
конец: Аналогично значению вправо, если текст идёт слева направо и влево, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

  

 
  
   выравнивание текста 
  <стиль>
   div {
    граница: сплошной черный 1px; / * Параметры рамки * /
    отступ: 5 пикселей; / * Поля вокруг текста * /
    нижнее поле: 5 пикселей; / * Отступ снизу * /
   }
   #left {выравнивание текста: слева; }
   #right {выравнивание текста: право; }
   #center {выравнивание текста: центр; }
   .content {
    ширина: 75%; / * Ширина слоя * /
    фон: # fc0; / * Цвет фона * /
   }
  
 
 
    Выравнивание по левому краю 
 
    Выравнивание по центру 
 
    Выравнивание по правому краю

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

Рис. 1. Выравнивание текста в браузере Safari

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[окно.] Document.getElementById («elementID»). Style.textAlign

Браузеры

IE до версии 7.0 правильно выравнивает не только содержимое блочного элемента, но и сам элемент.

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

Поддержка браузерами


12.0+	3.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство text-align указывает, каким образом будет выравниваться строчное содержимое (текст, изображения) по горизонтали, внутри родительского элемента контейнера (блок, ячейка таблицы, поле ввода формы).

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

Значение по умолчанию:	влево, если направление текста слева направо, и вправо, если направление текста справа налево
Применяется:	к блочным контейнерам (блок, inline-block, table-cell, table-captions, list-item)
Анимируется:	нет
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	объект.style.textAlign = «right»

Синтаксис

 выравнивание текста: слева | справа | по центру | по ширине | наследовать;

Значения свойства

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

Пример

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

div {
выравнивание текста: слева;
}

text-align — Веб-технологии для разработчиков

Резюме

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

900 Применяется к

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

Синтаксис

 Формальный синтаксис: start | конец | слева | право | центр | оправдать | родитель

 выравнивание текста: слева
выравнивание текста: вправо
выравнивание текста: центр
выравнивание текста: выравнивание по ширине
выравнивание текста: начало
выравнивание текста: конец
выравнивание текста: соответствие-родитель
выравнивание текста: начало конец
выравнивание текста: "."
выравнивание текста: начало "."
выравнивание текста: "." конец

выравнивание текста: наследование

Значения

начало: Подобно слева , если направление слева, и справа , если наоборот.
конец: Подобно вправо , если направление слева, и влево , если наоборот.
слева: Линейное содержимое выравнивается по левому краю линейного блока.
правый: Линейное содержимое выравнивается по правому краю линейного блока.
центр: Линейное содержимое центрируется в линейном блоке.
<строка>: Первое появление односимвольной строки — это элемент инструмента для выравнивания. Ключевое слово, следует или предшествует, и определить, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.
оправдать: Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.
Соответствующий родитель: Наподобие наследование с различием, что значение начало и конец вычисляются в соответствии с направлением и заменяются действующим левый или правый размер.

Примеры

Посмотреть живые примеры

Живые примеры

div { выравнивание текста: центр ; граница: сплошная; }

п {фон: золото; ширина: 22em; }

несколько текста… div { выравнивание текста: центр ; граница: сплошная; }

п {фон: золото; ширина: 22em; маржа: 1em auto ; }

несколько текста … div { выравнивание текста: -moz-center ; выравнивание текста: -webkit-center; граница: сплошная; }

п {фон: золото; ширина: 22em; }

несколько текста …

Примечание

Стандартный совместимый способ центрировать сам блок без выравнивания его содержимого, это установка его левое и правое поля в auto, пример:
margin: auto; или маржа: 0 авто; или левое поле: авто; маржа-право: авто;

Спецификации

Совместимость с браузерами

Возможность	Хром	Firefox (Gecko)	Internet Explorer	Opera	Safari
Базовая поддержка ( `слева` , `справа` , `по центру` и `по ширине` )	1.0	1.0 (1.7 или ранее)	3,0	3,5	1,0 (85)
Значения выравнивания блока [1]	1.0-веб-набор	1.0 (1.7 или ранее) -moz	Нет	Нет	1.0 (85) -khtml 1.3 (312) -webkit
`начало`	1,0	1.0 (1.7 или ранее)	Нет	(Да)	3.1 (525)
`конец`	1,0	3,6 (1,9,2)	Нет	Нет	3,1 (525)
`Соответствующий родитель`	16	Нет	Нет	Нет	Нет
`строка>` значение	Нет	Нет	Нет	Нет	Нет

Возможность	Android	Chrome для Android	Firefox Mobile (Gecko)	IE мобильный	Opera Mobile	Safari Mobile
Базовая поддержка	?	?	?	?	?	?
Значения выравнивания блока [1]	?	?	?	?	?	?
`начало`	?	?	?	?	?	?
`конец`	?	?	?	?	?	?
`Соответствующий родитель`	?	?	?	?	?	?
`<строка>` значение	?	?	?	?	?	?

[1] Оба WebKit и Gecko префиксную версию слева , центр , и справа , которая используется не только к линейному содержимому, но также и к блочным элементам.Это используется для реализации унаследованных align атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.

Смотрите также

выравнивание текста | CSS | WebReference

Определяет горизонтальное выравнивание текста в пределах элемента.

Краткая информация

0 Нет4

0 Нет 4

 -align: по центру | оправдать | слева | право | начало | конец

Обозначения

Анимируется
Значение по умолчанию	слева
Наследуется	Да
Применяется	К блочным контейнерам
Анимируется

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	нормальный \| малые шапки
A \|\| B	Каждое Сообщение заведомо самостоятельно или с другими в произвольном порядке.	ширина \|\| count
[]	Группирует значения.	[урожай \|\| крест]
*	Повторять ноль или больше раз.	[, <время>] *
+	Повторять один или больше раз.	<число> +
?	Указанный тип, слово или группа не является обязательным.	вставка?
{A, B}	Повторять не менее A, но не более B раз.	<радиус> {1,4}
#	Повторять один или больше раз через запятую.	<время> #

Значения

центр: Выравнивание текста по центру. Текст помещается по центру горизонтали окна или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру по той причине, что читать большой объем такого текста неудобно.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краям. Чтобы это сделать, браузер в этом случае измените пробелы между словами.
осталось: Выравнивание текста по левому краю. В этом строке текста выравнивается по левому краю, а правый край предоставляется «лесенкой». Такой способ выравнивания является наиболее популярным на сайтех, поскольку позволяет пользователю легко отыскивать популярный популярный язык и комфортно читать большой текст.
правый: Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остаётся aquo; рваным ». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю обычно для коротких заголовков объёмом не более трёх строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа, там возможно подобный способ выравнивания и пригодится.
start: Аналогично значению влево, если текст идёт слева направо и вправо, когда текст идёт справа налево.
end: Аналогично значению вправо, если текст идёт слева направо и влево, когда текст идёт справа налево.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

выравнивание текста <стиль> div { граница: сплошной черный 1px; / * Параметры рамки * / отступ: 5 пикселей; / * Поля вокруг текста * / нижнее поле: 5 пикселей; / * Отступ снизу * / } #left {выравнивание текста: слева; } #right {выравнивание текста: право; } #center {выравнивание текста: центр; } .content { ширина: 75%; / * Ширина слоя * / фон: # fc0; / * Цвет фона * / }

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

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

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

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

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

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

Объект .style.textAlign

Примечание

IE до версии 7 включает не только содержимое блочного элемента, но и сам элемент.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Рекомендация (Рекомендация) - спецификация W3C и одобана как стандарт.
Кандидат в рекомендации (Возможная рекомендация) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Предлагаемая рекомендация (Предлагаемая рекомендация) - на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
Рабочий проект (Рабочий проект) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Черновик редакции (Редакторский черновик) - черновая версия стандарта после внесения правок редакторами проекта.
Эскиз (Черновик спецификации) - первая черновая версия стандарта.

Браузеры


слева, справа, по центру, по ширине	3	8	12	1	3.5	1	1
начало, конец			79	1	15	3,1	2


слева, справа, по центру, по ширине	1,5	1	4	1
начало, конец	80	68	46	3,2

Браузеры

В таблице следующих обозначений применяются следующие обозначения.

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

Число указывает версию, начиная с свойства, имеющего свойство.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 25.04.2020

Редакторы: Влад Мержевич

.
No related posts.

Разное

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное