Html text align: How to set Text alignment in HTML?

Содержание

Свойства CSS — text-align

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Ошибки	Ошибки	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

CSS (ЦСС)	CSS (ЦСС)2
Значение по умолчанию	left
Наследуется	Да
Применяется	Ко всем элементам
Аналог ШТМЛ	<center> <p \| h2 \| div \| table \| thead \| tbody \| tfoot \| tr \| th \| td align>
Ссылка на спецификацию	http://www. w3.org/TR/CSS21/text.ШТМЛ#propdef-text-align

Описание

Определяет горизонтальное выравнивание контента в пределах элемента. Этот атрибут наследуется, поэтому может быть установлен для целого блока для воздействия на все вложенные в него элементы.

Синтаксис

text-align: center | justify | left | right

Аргументы

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

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>text-align</title>
  <style type="text/CSS (ЦСС)">
   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. Выравнивание контента в браузере Опера

Браузер Internet Эксплорер несколько иначе трактует данный пример, чем Опера и Файер фох, выравнивая не только контент, но и блоки (рис. 2).

Рис. 2. Выравнивание контента в браузере Internet Эксплорер

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

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

Свойство text-align | Справочник HTML CSS

Задает выравнивание текста

text-align: left;

Пошаговый план! Как быстро научиться создавать сайты!

Chrome

Все

Edge

Все

FireFox

Все

iOS Safari

Все

Opera

Все

Safari

Все

Значения

text-align: left;

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

<style>
.example-1 {
    text-align: left;
}
</style>

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>