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

Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 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 свойство text-align со следующим значением:

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

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

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

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

.center  text-align: center; > .right  text-align: right; > .justify  text-align: justify; > 

Как сделать справа в html

Если вы используете свойство «float» со значением «right» — без дополнительных свойств, то получится блок с обтеканием.

Поставим свойство — float и положение справа –right.

float:right;/* Положение справа */

background: #fd0; /* Цвет фона */

width: 300px; /* Ширина */

Далее создадим div, присвоим ему класс, который описали сверху. И напишем в самом диве текст — Класс — sprava.

Смотрим, что мы получили:

Этот текст написан выше блока.

Класс — sprava

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

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

Div расположен справа свойство float без обтекания.

Предположим, что мы хотим поставить div справа с помощью float, но без обтекания текстом!

Самое простое, с моей точки зрения, поместить наш див с классом «sprava» в другой див, который будет иметь аналогичную высоту, что и класс sprava, т.е. 100px.

И добавим нашему наружному блоку «border: 1px solid;», чтобы мы его смогли увидеть!

Класс — sprava, но внутри второго блока с height =100px;

У нас получится:

border: 1px solid;

Результат расположения блока справа:

Как видим, наш блок расположился справа, и текст, который написан ниже, и расположился ниже блока.

Div справа с помощью свойства margin-left

Есть свойство margin-left , мы можем расположить div справа

Создадим ещё раз новый див. С новым классом.

Родительский блок имеет ширину 740px , и поставим в свойствах «margin-left =740px».

background: #fd0; /* Цвет фона */

width: 300px; /* Ширина */

Смотрим, что получилось:

Класс — sprava-2

Обратите внимание на поведение блока, он находится за краем правой границы, для разрешения монитора 1600 по горизонтали — почему данный блок вышел ровно за край родительского блока, мы предполагали, что он будет располагаться справа, но нет.
В чем ошибка!?

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

Ширина родительского блока = 700

Поэтому, нам нужно от 700 отнять ширину нашего блока справа 300 — и поставить её в свойство «margin-left».

700 -300 = 400.

Стили для блока справа, но в родительском блоке.

.sprava-2_1 <
margin-left: 400px;
background: #fd0;
width: 300px;
height: 100px;
>
Класс — sprava-2_1

Как видим, наш блок справа не зашел за края родительского блока.

Div справа в крайней правой точке монитора

Предположим, что вам нужно поставить div справа, максимально справа, чтобы он упирался в правый корай окна браузера.

Создадим новый блока и новый класс:

Свойство «right» будет работать только в том случае, если м поставим position: absolute;
Блок находится в максимально правой стороны. Дальше, край окна браузера.

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

Если вы уменьшите размер окна, до менее чем 740(ширина родительского блока), то блок наедет на текст.

Когда данный блок будет наезжать на основной блок с текстом?!

Сделаем скрин, когда размер экрана меньше 1080 и поставим родительскому блоку «border», чтобы мы могли его увидеть.

Если вы читали внимательно, то должны были заметить, что цифры не бьется.

Главный блок » div » = 740px.

Прибавляем 300px — ширину нашего блока справа 740 + 300 = 1040, а на скрине 1080. где еще 40 px?

Дело в том, что у «main_text» есть дополнительные 20px отступа с каждой стороны, вот 20 + 20 — 40.

Поэтому, как только ширина окна будет меньше 1080, наш блок будет наезжать на основной блок «main_text».

Нажмите, чтобы открыть в новом окне.

Div справа в крайней правой точке родительского блока

Когда мы рассматривали позицию блока справа с помощью «margin-left: 440px;», но если ваш родительский блок имеет резиновую ширину, то этот блок справа, будет уезжать вправо, при уменьшении основного и влево при увеличении.

Смотрим на скрине :

Нажмите, чтобы открыть в новом окне.

Кстати — этой болезнью не страдает вариант №2

И далее следующий вариант, блок будет находиться справа, в любой ситуации.

Div справа с помощью свойства right

Возьмем данные из предыдущего блока. и поместим его в другой блок и задаем ему свойства:

Смотрим, что у нас получилось:

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

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

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

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

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

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

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

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

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

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

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

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