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

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

1. Горизонтальное выравнивание по центру блока/страницы

1.1. Если для блока задана ширина:

div {   width: 300px;   margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/  }

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

1.2. Если блок вложен в другой блок и для него не задана/задана ширина:

<div class="wrapper">  <div class="box"></div>  </div>

.wrapper {text-align: center;}

1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:

<div class="wrapper">  <div class="box"></div>  </div>

.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}  .box {  width: 400px;  position: absolute;   left: 50%;  margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/  }

1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:

<div class="wrapper">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  </div>

.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}  .box {  display: inline-block; /*располагаем блоки в ряд по горизонтали*/  margin-right: -0.25em; /*убираем правый отступ между блоками*/  }

2. Вертикальное выравнивание

2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:

.button {   height: 50px;   line-height: 50px;  }

2.2. Для выравнивания блока по вертикали внутри родительского блока:

<div class="wrapper">  <div class="box"></div>  </div>

.wrapper {position: relative;}  .box {   height: 100px;   position: absolute;   top: 50%;   margin: -50px 0 0 0;  }

2.3. Вертикальное выравнивание по типу таблицы:

<div class="wrapper">  <div class="box"></div>  </div>

.wrapper {   display: table;   width: 100%;  }  .box {   display: table-cell;   height: 100px;   text-align: center;   vertical-align: middle;  }

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

<div class="wrapper">  <div class="box"></div>  </div>

.wrapper {   position: relative;  }  .box {   height: 100px;   width: 100px;   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   margin: auto;   overflow: auto; /*чтобы контент не расползался*/  }

2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:

если для элемента заданы размеры

<div></div>

div {   width: 300px; /*задаем ширину блока*/   height:100px; /*задаем высоту блока*/   transform: translate(-50%, -50%);   position: absolute;    top: 50%;    left: 50%;  }

если для элемента не заданы размеры и он не пустой

<div>   <h1>Some text here</h1>  </div>

h1 {   margin: 0;   transform: translate(-50%, -50%);   position: absolute;    top: 50%;    left: 50%;  }

html5book.ru

Горизонтальное выравнивание встроенных элементов

В принципе, со встроенными элементами, которые имеют CSS свойство display: inline; или display: inline-block; проблем с горизонтальным выравниванием быть не должно и это решается стандартным свойством text-align.

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

  text-align: center;  

Таким способом можно выровнять текст, изображение, таблицы и другие элементы, не являющиеся блочными. Более того, можно использовать тег center, но он является устаревшим и может не пройти проверку на валидность (не проверялось, т. к. нет необходимости). Также, например, для выравнивания таблицы или блока (div) по центру можно добавить в тег table атрибут align=»center».

  <center>Самый обыкновенный текст.</center>  

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

Горизонтальное выравнивание блока (div) и других блочных элементов

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

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

Теперь же осталось просто воспользоваться свойством автоматического отступа:

  margin: 0 auto;  

После присвоения блоку этого свойства, он переместится в центр экрана. Фактически margin: 0 auto — это сокращенная запись следующего варианта, который, как видите намного более громоздкий и не имеет права на существование, т. к. является дурным тоном и увеличивает размер файла в 4-6 раз:

  margin-top: 0;  margin-right: auto;  margin-bottom: 0;  margin-left: auto;  

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

Вертикальное выравнивание встроенных элементов

Для того, чтобы выровнять текст, изображение, таблицу и другие встроенные элементы по вертикали, необходимо сделать их блочными либо полностью:

  display: block;  

Либо только наполовину:

  display: inline-block;  

Вертикальное выравнивание блочных элементов

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

Например, если высота экрана или родительского элемента равна 1000 пикселей, а высота блока, который мы хотим выровнять по вертикали — 500 пикселей, то произведя необходимые вычисления, мы получим следующее:

  /* (1000 - 500) / 2 = 250 */  margin: 250px auto;  

Более простой, но не кроссбраузерный на 100% пример:

  margin: auto;  

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

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

Отступ padding или margin

Преднамеренно увеличиваем размер родительского элемента, как бы расширяя его при помощи padding или margin:

  margin: 300px 0;  /* или */  padding: 300px 0;  

Одна строка текста и line-height

В этом примере необходимо знать высоту родительского элемента и быть уверенным в том, что текст достаточно короткий и не будет переноситься (обычно используется для вертикальных меню в сайдбаре):

  /* Например, высота родительского элемента равна 300 пикселей */  line-height: 300px;  

Вертикальное выравнивание иконок или смайлов в тексте

Часто оказывается так, что высота смайла или иконки, вставленной в текст не равна высоте одной строки текста, поэтому нужно либо установить line-height, равный высоте иконки или же использовать свойство vertical-align для изображений.

  vertical-align: middle;  

Таблица или display: table-cell

Таблица отлично подходит для вертикального выравнивания текста и более того имеет это свойство для ячеек по умолчанию (аналоговый атрибут — valign=»middle»), однако если нужно использовать блоки, то можно присвоить им свойство display: table; и display: table-cell; (что является издевательством и полным идиотизмом), тогда обычный vertical-align заработает.

  <div class="table">  	<div class="td">  		Самый обыкновенный текст.  	</div>  </div>  

  .table {  	display: table;  }  .td {  	display: table-cell;  }  

Абсолютное позиционирование position: absolute

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

  position: absolute;  margin: auto;  top: 0;  right: 0;  bottom: 0;  left: 0;  

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

makeasite.ru

Приветствую вас, дорогие коллеги!

Сегодня я хотела бы с вами поделиться одним полезным приемом работы с 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

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

по умолчанию text-align margin-left float position display

<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-space: nowrap; /* текст не будет переноситься на другую строку */ } </style>  Похожие материалы: <ol class="raz">  <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; /* блок занимает ширину родителя, 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

Выравнивание по краям 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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали 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 заголовок второго уровня.

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

alekseygulynin.ru

Вертикальное и горизонтальное центрирование в CSS уровня 3

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

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

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

 <div class=container4>  <p>Центр! </div>

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

 div.container4 {  height: 10em;  position: relative } div.container4 p {  margin: 0;  background: yellow;  position: absolute;  top: 50%;  left: 50%;  margin-right: -50%;  transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

 div.container6 {  height: 10em;  display: flex;  align-items: center;  justify-content: center } div.container6 p {  margin: 0 }

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

www.w3.org

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

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

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

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что 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

Лучшие статьи читаем:

Как вставить картинку на сайт html Абзац в html Шестнадцатиричные коды цветов Как сделать обтекание текста