Выравнивание в html – Выравнивание содержимого в ячейках — Знакомство с таблицами — HTML Academy — Вебджем.рф

Содержание

Выравнивание элементов в HTML

Вы здесь: Главная — HTML — HTML Основы — Выравнивание элементов в HTML

До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.

Выравнивание элементов — это самые основы HTML, которые просто необходимо знать при создании интернет сайтов. Первое, что необходимо сделать — это набрать HTML-код простейшей страницы.

Ещё когда-то давно появился тег <center> я сейчас Вам не советую его применять, ввиду наличия более современных способов, но не упомянуть я о нём не могу. Использовать его очень и очень просто. Всё, что Вам необходимо выравнять по центру, Вы помещаете внутри этого тега. Вот, например, тут мы выравниваем заголовок 1-го уровня по центру.

<center>
  <h2>Заголовок 1-го уровня, выравненный по центру</h2>
</center>

Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега <br>:

<center>
  <h2>Заголовок 1-го уровня, выравненный по центру</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</center>

Это был тег <center>, который уже устарел, вдобавок, вопреки Вашим ожиданиям тегов <left> и <right> просто не существует. Допустим, по левому краю выравнивается по умолчанию, по центру выравнивается с помощью тега <center>, но как же быть с правым?

Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов

HTML. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега <div>. То есть всё, что необходимо поместить в определённый контейнер помещается внутри тега <div>. А уже у этого тега есть атрибут «align«, значение которого и определяет положение данного контейнера. Бывают три значения: «left«, «center«, «right«. По умолчанию, стоит «left«, впрочем, думаю, что Вас это не удивляет.

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

<div align = "right">
  <h2>Заголовок 1-го уровня, выравненный по правому краю</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>

Как видите, всё работает. Советую Вам также поменять значения атрибута «align«, чтобы посмотреть на другие виды выравнивания содержимого контейнеров.

Другой способ выравнивания элементов HTML — это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей.

А пока Ваша страница должна выглядеть так:

<html>
<head>
</head>
<body>
<center>
  <h2>Заголовок 1-го уровня, выравненный по центру</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</center>
<div align = "right">
  <h2>Заголовок 1-го уровня, выравненный по правому краю</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>
</body>
</html>

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Создано 28.04.2010 17:08:49
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Выравнивание элементов | htmlbook.ru

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

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
    height: 100%; /* Высота таблицы */   
   } 
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td align="center"><img src="images/recipe.png" 
     alt="Рецепты HTML">
    </td>
   </tr>
  </table> 
 </body>
</html>

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега <td>, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать <!DOCTYPE>, код при этом перестает быть валидным.

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

Выравнивание по горизонтали

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

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

Для указания выравнивания содержимого ячеек по верхнему краю, для тега <td> требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign

<!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>
  <table cellpadding="5">
   <tr>
    <td valign="top" bgcolor="#f0f0f0">Колонка 1</td>
    <td valign="top" bgcolor="#ffcc00">Колонка 2</td>
   </tr>
  </table> 
 </body>
</html>

В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

<!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>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   #col1 {
    width: 75%; /* Ширина первой колонки */
    background: #f0f0f0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 25%; /* Ширина второй колонки */
    background: #fc5; /* Цвет фона второй колонки */
    text-align: right; /* Выравнивание по правому краю */
   }
   #col1, #col2 {
    vertical-align: top; /* Выравнивание по верхнему краю */
    padding: 5px; /* Поля вокруг содержимого ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>Колонка 1</td>
    <td>Колонка 2</td>
   </tr>
  </table> 
 </body>
</html>

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom.

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

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

Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

<!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> 
  <table>
   <tr>
    <td></td>
    <td align="center"><img src="images/formula.png" 
      alt="Формула 18.6"></td>
    <td align="right">(18.6)</td>
   </tr>
  </table> 
 </body>
</html>

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

Выравнивание элементов формы

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

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

<!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>
  <form method="post" action="handler.php">
   <table cellspacing="0" cellpadding="4">
    <tr> 
     <td align="right">Имя</td>
     <td><input type="text" name="nickname" maxlength="50" size="20"></td>
    </tr>
    <tr> 
     <td align="right">E-mail</td>
     <td><input type="text" name="email" maxlength="50" size="20"></td>
    </tr>
    <tr> 
     <td align="right" valign="top">Комментарий</td>
     <td><textarea name="text" cols="35" rows="10"></textarea></td>
    </tr>
    <tr> 
     <td></td>
     <td><input type="submit" value="Добавить комментарий"></td>
    </tr>
   </table>
  </form>
 </body>
</html>

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align=»right». Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign.

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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали HTML-теги для работы с текстом. Пришло время разобраться с тем, как выравнивать текст на странице HTML. Если вы обратили внимание, все то, что вы с вами набирали до этого, выравнивается по левому краю браузера, при чем мы ничего не делаем, так устроено по умолчанию.Что же делать для того, чтобы выравнить содержимое, скажем, по центру? Мне в голову приходит устаревший тег <center></center>. На данный момент его я нигде не использую, но, думаю, вам будет полезно его знать. Напишем код нашей страницы и расположим текст по центру. Для этого нужно текст или любой другой элемент (например, картинку) расположить между тегами <center></center>:


<html>
<head>
<meta charset="utf-8"/>
<title>Выравнивание элементов в HTML</title>
</head>
<body>
  <p>Текст с левой стороны</p>
  <center>
	<p>Центральный текст</p>
  </center>
</body>
</html>

После открытия страницы в браузере, мы увидим, что текст действительно расположился по центру страницы.
Хочу обратить ваше внимание вот на какой момент: вы можете решить, что если есть тег <center> — значит должны быть и теги <left>, и <right>. Заключив содержимое в теги <left></left> вы увидите, что текст действительно расположился слева. Но это будет не из-за того, что вы поставили тег <left>, а из-за того, что браузер по умолчанию располагает все элементы слева направо, сверху вниз. Так как браузер не знает тега <left> он просто его пропустил. Тегов <left> и <right> не существует.

Что же нам делать, если мы захотим разместить элементы справа? Давайте рассмотрим понятие контейнера <div>, без знания которого не обойтись при блочной верстке сайта. Существует также и табличная верстка. Эти 2 темы заслуживают особого внимания, поэтому о них поговорим в отдельных статьях.
Элемент <div> является контейнером, который может включать в себя любые другие элементы, также и другие контейнеры <div>. У тега <div> есть атрибут align, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left, center, right. Давайте напишем код, где расположим элементы в различных частях браузера:


<html>
<head>
<meta charset="utf-8"/>
<title>Выравнивание элементов в HTML</title>
</head>
<body>
<div>Текст, расположенный слева</div>
<div align="center">Текст, расположенный по центру</div>
<div align="right">Текст, расположенный справа</div>
</body>
</html>

В данной статье вы научились выравнивать текст на html-странице.

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Следующая статья >

Выравнивание элементов в HTML. Выравнивание текста в HTML

Продолжая свои «css-раскопки» возникла новая идея, разобрать по косточкам ещё одну актуальную тему, которая касается равномерного выравнивания блоков по ширине. В принципе мои доскональные исследования я уже запостил у себя в блоге , но так как прошлая моя работа очень понравились Хабра-сообществу, то я решил сделать здесь небольшой краткий обзорчик этой статьи, чтобы ни одна хабра-душа не пропустили её наверняка. Так что, как говорил Гагарин: «Поехали».

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

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

Как это работает?

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

* В этом обзоре я не стал постить разбор этапов всего алгоритма, об этом можно почитать в самой статье . Главное, чтобы вы понимали суть.

Наша задача

Наша задача состоит в том, чтобы построить решение на базе этого алгоритма. Применить, симулировать, заменить, сделать всё что угодно, главное в итоге получить то, что мы хотим. А именно – равномерно выровненные элементы в строке, боковые из которых прижаты к своим границам. Ну и конечно же расстояния (пробелы) между этих элементов должны быть абсолютно одинаковыми при любой ширине контейнера.

* Сразу хочу сообщить, что вариантов (рабочих и не очень) на самом деле получилось целых 4 штуки, плюс ещё куча интересных и полезных разобранных нюансов, на огромную статью (в моём стиле). Поэтому тут я вкраце опишу некоторые из них:)

Варианты 3

А вот третий вариант уже построен на самом алгоритме text-align: justify и инлайн-блоках, которые и принесли свои плоды, но не совсем. Во-первых, мне пришлось разбавить список лишним, дополнительным элементом, а во-вторых, в IE6-7 обнаружились интересные факты, рыться в которых мне доставило большое удовольствие. В этих браузерех данное решение отказывалось работать вообще. И догадайтесь, кто пришёл мне на помощь. Верно, SelenIT2 ! Но он пришёл ни один, а с великолепной идеей (которую он нагло спёр у нашего общего коллеги по цеху GreatRash), от которой я был просто в шоке. Как оказалось, пара волшебных свойств CSS3 родом из глубокой древности может превратить это решение в кроссбраузерное и заставить работать text-align: justify в наших старичках IE6-7.

Весь секрет оказался в последней строчке следующего кода:
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* Обнуляем для родителя*/ line-height: 0; font-size: 1px; /* 1px для Opera */ /* Лекарство для IE6-7*/ text-justify: newspaper; }
Как видно, с помощью text-justify: newspaper; у ul наш вариант становится кроссбраузерным. Это происходит за счёт того, что свойство text-justify: newspaper предназначено для увеличения или уменьшения интервалов между буквами и между словами. MSDN заявляет, что эта вещь «Самая навороченная форма выравнивания для латинского алфавита», а вот в этой статье ещё есть и дополнение, что для арабских текстов это свойство вытягивает и сами буквы.

Варианты 4

Ну, и вариант 4 стал отказом от дополнительной разметки, что повлекло за собой новые проблемы в IE6-7.

Оказывается всё дело в том, что text-justify: newspaper лишь даёт возможность растягивать наши буквы (inline-block), но не команду. Проще говоря, он рассказывает строке, как бы он хотел, чтобы она была растянута, а text-align: justify является растягивающей силой. Т.е. text-align: justify отвечает за растяжение строки, а text-justify: newspaper лишь уточняет, как именно это растяжение будет происходить.

В обзоре 3-го варианта я сказал, что SelenIT2 подсказал мне два свойства, одно из которых (text-justify: newspaper) помогло нам в предыдущем варианте, а другое как раз помогло в этом! Причём в этот раз они объединились и уже с двойной силой смогли победить последний вариант.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* Обнуляем для родителя*/ line-height: 0; font-size: 1px; /* 1px для Opera */ /* Лекарство для IE6-7*/ text-justify: newspaper; zoom:1; /* Включаем в работу последнюю строку*/ text-align-last: justify; }
Встречайте! text-align-last — свойство, которое включает алгоритм text-align: justify в самой последней строке текста, если к ней применён этот самый text-align: justify . Проще говоря, когда мы применяем к тексту обычный text-align: justify , то, видя это, text-align-last указывает первому на то, что он поступает плохо и что ему придётся теперь работать и в последней строчке тоже.

Кстати, эти свойства специфицированы , а не какая-нибудь проприетарщина (кроме значения newspaper, которое теперь называется иначе). Так что ни один котенок не пострадает) И хочу подчер

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

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

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

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


p {
text-align: left;
}

HTML-выравнивание по ширине страницы: советы и рекомендации

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

Выравнивание элементов страницы

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

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

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

Самый простой способ выполнить выравнивание по ширине — HTML-теги или средства CSS.

Html и Css, плоское изображение, логотип

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

Существует четыре основных способа расположить текст и элементы на веб-странице:

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

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

Ниже будет рассмотрен пример кода, в котором будут отображены примеры использования основных способов форматирования для выравнивания по ширине в HTML.

За расположение текста отвечает атрибут align, который работает с такими тегами как <div>, <p>, <h2> и другими.

Синтаксис будет выглядеть следующим образом:

 <body>
  <h2 align="center">Первый заголовок в примере выравнивается по центру</h2>
  <h3 align="right">Выравнивание подзаголовка по правому краю</h3>
  <p align="justify">Для длинного элемента текста, который состоит из нескольких предложений, подойдет вариант с выравниванием по ширине. 
Это улучшает читаемость текста. </p>
  <h3 align="left">Следующий подзаголовок расположен слева</h3>
 </body>

Скопируйте приведенный выше пример в блокнот и сохраните в виде HTML-файла. Открыв его в любом браузере, вы на практическом примере поймете, как работает выравнивание.

Его можно применять не только к тексту, но и к изображениям, тогда код будет выглядеть так:

 <img src="kartinka.jpg" align="center">

В этом примере выполнено выравнивание по центру в HTML. Попробуйте поэкспериментировать и перенести картинку вправо или влево с использованием соответствующих значений атрибута align.

Выравнивание при помощи CSS

Расположить элементы веб-страницы соответствующим образом можно не только с помощью HTML, но и средствами CSS. Для выполнения этой задачи используется такое свойство стиля, как text-align. Его прописывают либо в рамках тега <style> прямо в теле HTML-документа либо выносят в отдельный файл стилей с расширением .css, который затем подключают к странице.

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

Синтаксис выравнивания текстовых элементов будет выглядеть следующим образом.

 <style>
   p {
    text-align: center; /* Выравнивание по центру */
   }
   h2 {
    text-align: right; /* Выравнивание по правому краю*/
}
   h3 {
    text-align: left; /* Выравнивание по левому краю*/
}
  </style>

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

Создайте текстовый документ и скопируйте туда этот код. В данном примере основные абзацы, заключенные в тег <p> будут расположены посередине страницы, заголовки первого уровня отобразятся справа, а подзаголовки второго уровня — слева.

Среди современных веб-разработчиков и профессионалов верстки использование таблиц стилей считается более предпочтительным для оптимизации интернет-страницы.

Дополнительные способы форматирования

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

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

<body>
<p><blockquote>Увеличенный отступ слева</blockquote></p>
</body>

Существует аналогичный способ сделать большой отступ слева с заданным значением при помощи CSS. Для этого используется следующее свойство стиля.

<p>Увеличенный отступ слева</p>

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

Еще один интересный тег, который может быть использован для форматирования текста, но в наше время практически полностью утратил свое значение — это <nobr>.

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

Заключение

Итак, в статье были рассмотрены основные способы выравнивания текста и других структурных элементов веб-страницы с помощью средств HTML и CSS. Какой из способов выбрать? Это следует решать в зависимости от того, какие цели и задачи поставлены во время верстки сайта.

Выравнивание по правому краю | CSS — Примеры

Как выровнять картинку по правому краю

по умолчанию text-align margin-left float position display Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны. Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right, позволяющих сдвигать содержимое вправо. Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны. Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static, с помощью свойств top, right, bottom, left. При direction: ltr; свойство left имеет приоритет над свойством right, кроме случаев, когда свойство left имеет значение auto. Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table, а table-cell — td. Также стоит обратить внимание на значение flex.

<div>Длинный абзац с несколькими предложениями. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.</div>

<style>
.raz {
  text-align: right;
}
</style>

<div><a href="http://shpargalkablog.ru/2016/02/text-align.html">Свойство <code>text-align</code></a> наследуется, применяется к блочным элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"><br>Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе <code>right</code>, позволяющих сдвигать содержимое вправо.</div>

<style>
.raz img {
  display: block; 
  margin-left: auto;
}
</style>

<div><a href="http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html">Свойство <code>margin-left</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> У него есть значение <code>auto</code>, которое выравнивает блочный элемент по горизонтали. А именно <code>margin-left: auto;</code> прижимает элемент к правому краю родителя. Это положение может изменяться свойством <code>margin-right</code>. <a href="http://shpargalkablog.ru/2012/03/div-po-centru-html.html">При <code>margin-left: auto;</code> и <code>margin-right: auto;</code> элемент размещается по центру ширины предка.</a></div>

<style>
.raz img {
  float: right;
}
</style>

<div><a href="http://shpargalkablog.ru/2011/05/float-left-div-css.html">Свойство <code>float</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.</div>

<style>
.raz {
  position: relative; 
}
.raz img {
  position: absolute;
  right: 0;
}
</style>

<div><a href="http://shpargalkablog.ru/2012/04/pozitsionirovaniye-css.html">Свойство <code>position</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> <a href="http://shpargalkablog.ru/2011/04/css-nalozhenie.html"><code>position: absolute;</code></a> вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение <code>position</code> отлично от <code>static</code>, с помощью свойств <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>. При <code>direction: ltr;</code> свойство <code>left</code> имеет приоритет над свойством <code>right</code>, кроме случаев, когда свойство <code>left</code> имеет значение <code>auto</code>.</div>

<style>
.raz {
  display: table;
}
.raz div {
  display: table-cell;
  vertical-align: top; 
}
</style>

<div>
  <div><a href="http://shpargalkablog.ru/2012/04/display-block-inline-css.html">Свойство <code>display</code></a> не наследуется, применяется ко всем элементам. Элемент со значением <code>table</code> подобен <a href="http://shpargalkablog.ru/2012/01/html-table.html">тегу <code>table</code></a>, а <code>table-cell</code> — <code>td</code>.</div>
  <div><img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"></div>
</div>

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

Как выровнять текст по правому краю

Короткий текст справа

<style>
.raz {
  text-align: right;
}
</style>

<div>Короткий текст справа<div>

<style>
.raz {
  margin: 0;
  border-top: solid 2px;
  padding: 0;
  overflow: auto; 
}
.raz li {
  clear: both;
}
.raz span {
  float: right;
  white-space: nowrap; 
}
</style>

Похожие материалы:
<ol>
  <li><a href="//shpargalkablog.ru/2012/03/div-po-centru-html.html">горизонтальное выравнивание html</a> <span>обновлена</span>
  <li><a href="//shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html">вертикальное выравнивание html</a> <span>нечего добавить</span>
  <li><a href="//shpargalkablog.ru/2013/07/justify.html">выравнивание по ширине html</a> <span>хочу обновить</span>
</ol>

Как выровнять блок по правому краю

отступ справа

<style>
.raz div {
  max-width: 8em; 
  min-height: 2em;
  margin-left: auto;
  margin-right: 0;
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div>
  <div>HTML код</div>
</div>