Приветствую вас, дорогие коллеги!
Сегодня я хотела бы с вами поделиться одним полезным приемом работы с HTML, который в отдельных случаях в процессе заполнения страниц сайта поможет сэкономить время.
В этой статье мы познакомимся с атрибутом align и вы узнаете как можно при верстке страницы сделать в HTML выравнивание по ширине, по центру или по правому краю, не задавая классы и не используя CSS-стили.
Как вы, наверное, уже знаете, при верстке страницы весть текст по умолчанию выравнивается по левому краю, то есть по умолчанию атрибуту align имеет значение «left».
Если же вам нужно задать в HTML выравнивание по ширине, по центру или по правому краю то вы должны указать атрибут align в теге <p> , <div>, <h1> и так далее со значением, соответствующим направлению выравнивания текста.
Атрибут align может принимать следующие значения выравнивания:
- left – по левому краю, задается по умолчанию.
- right – по правому краю
- center – по центру
- justify – по ширине.
Пример использования:
Вот как это будет выглядеть в HTML:
В данном случае текст будет растянут по ширине блока в котором он находится:
Для данного фрагмента текста было использовано HTML выравнивание по ширине с помощью атрибута align
Этот способ использования HTML выравнивания по ширине очень удобен при верстке страницы, в том случае, если вам нужно выделить какой-то определенный участок текста и присваивать этому элементу отдельный класс, а потом ещё писать CSS-стили нет особого смысла. Если же вам нужно выровнять весть текст на странице, то, конечно же, задавать для каждого абзаца или заголовка атрибут align не стоит. В этом случае намного проще и быстрее задать оформление текста CSS-стилями.
А на сегодня у меня все. Надеюсь, данная статья будет для вас полезной. Не забывайте подписаться на мою рассылку, и оставить комментарий под статьей.
Успехов вам в работе и до встречи в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru
Как выровнять картинку по правому краю
<div>Длинный абзац с несколькими предложениями. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg" height="100" width="86"> Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.</div>
<style> .raz { text-align: right; } </style> <div class="raz"><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" height="100" width="86"><br>Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе <code>right</code>, позволяющих сдвигать содержимое вправо.</div>
<style> .raz img { display: block; /* смещает только блоки */ margin-left: auto; } </style> <div class="raz"><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" height="100" width="86"> У него есть значение <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 class="raz"><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" height="100" width="86"> Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.</div>
<style> .raz { position: relative; /* смещает относительно родителя с классомraz
*/ } .raz img { position: absolute; right: 0; } </style> <div class="raz"><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" height="100" width="86"> <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 class="raz"> <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" height="100" width="86"></div> </div>
Совет: на данном примере занятно поглядеть как ведёт себя картинка, когда уменьшается размер окна браузера.
Как выровнять текст по правому краю
<style> .raz { text-align: right; } </style> <div class="raz">Короткий текст справа<div>
<style> .raz { margin: 0; border-top: solid 2px; padding: 0; overflow: auto; /* очистить float */ } .raz li { clear: both; } .raz span { float: right; white-.
="//shpargalkablog.ru/2013/07/justify.html">выравнивание по ширине html</a> <span>хочу обновить</span> </ol>
Как выровнять блок по правому краю
<style> .raz div { max-width: 8em; /* блок занимает ширину родителя, max-width
её ограничивает */ min-height: 2em; margin-left: auto; margin-right: 0; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> </div>
<style> .raz { position: relative; padding-right: 8em; /* чтобы элемент не был поверх содержимого родителя */ } .raz div { position: absolute; /* блок занимает ширину содержимого,max-width
её ограничивает */ top: 0; /* прикрепить к верху родителя */ right: 0; max-width: 8em; min-height: 2em; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> Текст </div>
<style> .raz div { float: right; /* блок занимает ширину содержимого, max-width
её ограничивает */ max-width: 8em; min-height: 2em; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> Текст </div>
<style> .raz { text-align: right; } .raz div { display: inline-block; /*inline-block
занимает ширину содержимого,max-width
её ограничивает */ max-width: 8em; min-height: 2em; border: 1px solid orange; text-align: start; /* убрать наследованиеtext-align
*/ background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> </div>
Как выровнять несколько блоков по правому краю
<style> .raz div { width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
<style> .raz { text-align: right; } .raz div { display: inline-block; /* см. как изменить промежуток между inline-block элементами */ width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; vertical-align: middle; /* см. как убрать отступ под inline-block элементами */ text-align: start; background: #fff5d7; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
<style> .raz div { width: 8em; max-width: 100%; min-height: 2em; margin: 0 0 0 auto; /* то же, чтоmargin-left: auto;
*/ border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
<style> .raz div { float: right; width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } .raz::after { /* очистить float */ content: ""; display: block; clear: both; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
/* смутно понимаю где это можно пригодиться, возможно, чтобы сделать что-то такое */ <style> .raz { position: relative; min-height: 2em; } .raz div { position: absolute; right: 0; width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } .raz div:nth-of-type(2) { right: 8em; } .raz div:nth-of-type(1) { right: 16em; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
Два блока: один — слева, другой — справа
/* например, для ссылок «предыдущая» — «следующая» */ <style> .raz { /* очистить float */ display: inline-block; width: 100%; box-sizing: border-box; } .raz div { float: right; width: 10em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } .raz div:nth-of-type(odd) { float: left; clear: right; background: yellow; } </style> <div class="raz"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
<style> .raz { -moz-text-align-last: justify; text-align-last: justify; /* выровнять элемент по ширине */ } .raz div { display: inline-block; width: 10em; max-width: 100%; min-height: 2em; border: 1px solid orange; vertical-align: middle; background: #fff5d7; } .raz div:nth-of-type(odd) { background: yellow; } </style> <div class="raz"> <div></div> <div></div> <br> <div></div> <div></div> <br> <div></div> <div></div> </div>
shpargalkablog.ru
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 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.
Код 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 достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h1>. В примере 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> <h1 align="center">Как поймать льва?</h1> <p align="right"><strong>Метод перебора</strong></p> <p>Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p> <p align="right"><strong>Метод дихотомии</strong></p> <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p> </body> </html>
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
htmlbook.ru
Выравнивание текста в CSS
У свойства text-align имеется 4 стандартных значения:
right — выравнивание по правому краю.
center — выравнивание по левому краю.
left — выравнивание по левому краю.
justify — выравнивание по ширине. Для этого браузер создает пробелы между символами, что бы достичь этого результата.
Код CSS
.text_center {
text-align: center; /* выравнивание по центру */
}
.text_left {
text-align: left; /* выравнивание по левому краю */
}
Пример выравнивания текста в CSS
Теперь перейдём к примеру, где рассмотрим действие выравнивания текста.
Код HTML и CSS
<html>
<head>
<title>Пример выравнивания текста в CSS</title>
<style>
.text_center {
text-align: center; /* выравнивание по центру */
}
.text_left {
text-align: left; /* выравнивание по левому краю */
}
.text_right {
text-align: right; /* выравнивание по правому краю */
}
.text_justify {
text-align: justify; /* выравнивание по ширине */
}
</style>
</head>
<body>
<p class="text_center">Текст по центру</p>
<p class="text_left">Текст по левому краю</p>
<p class="text_right">Текст по правому краю</p>
<p class="text_justify">Текст по ширине</p>
</body>
</html>
В результате независимо от масштабирования окна текст будет выравниваться согласно значению свойства text-align.
Спасибо за внимание!
tradebenefit.ru
Выравнивание по краям 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 class="right">Конструктор сайтов "Нубекс"</div> </body> </html>
Здесь происходит выравнивание текста по правому краю при помощи атрибута CSS text-align.
nubex.ru