Атрибут align тега <p> — вирівнювання абзацу

Атрибут align задає вирівнювання тексту всередині абзацу.

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

<p align="left|right|center|justify">

Атрибут align може отримувати 4 значень:

left

Вирівнювання тексту по лівому краю. В цьому випадку рядки тексту вирівнюється по лівому краю, а правий край розташовується «драбинкою». Такий спосіб вирівнювання є найбільш популярним на сайтах, оскільки дозволяє користувачеві легко відшукувати поглядом новий рядок і комфортно читати великий текст.

автор: с3с

правити

right

Вирівнювання тексту по правому краю. Цей спосіб вирівнювання виступає в ролі антагоніста попереднього типу. А саме, рядки тексту рівняються по правому краю, а лівий залишається «рваним».

автор: с3с

правити

center

Вирівнювання тексту по центру. Текст розміщується у центрі горизонталі вікна браузера або контейнера, де розташований текстовий блок. Рядки тексту немов нанизуються на невидиму вісь, яка проходить по центру веб-сторінки.

автор: с3с

правити

justify

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

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1+	1+	1+	1+	12+	1+

Підтримка: мобільні переглядачі

Переглядач
	1+	1+	1+	1+

Приклади

+ запропонувати свій приклад у пісочниці

<p>Виберіть потрібне значення для <code>align</code>:

<select id="form">
   <option value="left" name="value">left</option>
   <option value="right" name="value">right</option>
   <option value="center" name="value">center</option>
  <option value="justify" name="value">justify</option>
</select>
  </p>
<hr>

<div class="block1" >
   
  <p id = "text">HTML тег p визначає текстовий абзац.

Елемент p це блоковий елемент, тому абзац завжди починається з нового рядка, абзаци тексту що йдуть один за одним розділяються між собою відступом. Величини відступів можуть бути змінені за допомогою CSS властивості margin.
    </p>
</div>

Result
EDIT ON
 *{
  text-align:center;
}

var wrapper = document.getElementById('text');
var form = document.getElementById('form');

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      wrapper.align = form.options[i].value;
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

<p align="right">Вирівнювання тексту по правому краю</p>

<p align="center">Вирівнювання тексту по центрі</p>

<p align="left">Вирівнювання тексту по лівому краю</p>

<p align="justify">Вирівнювання по ширині, що означає одночасне вирівнювання по лівому і правому краю. Щоб зробити це дію браузер в цьому випадку додає пропуски між словами.</p>

<p align="center">Цей абзац вирівняно атрибутом align="center".</p>
<p align="center" class="theme">І цей теж — але в темі для нього є text-align: left, тож атрибут мовчить.</p>

p {
  font: 16px/1.6 system-ui, sans-serif;
  padding: 10px 14px;
  margin: 0 0 10px;
  background: #f1f5f9;
  border-radius: 4px;
}

.theme {
  text-align: left;
}