Атрибут align тега <h2> — вирівнювання заголовка розділу

HTML

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

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

</select>
  </p>
<nav id='text'>Текст розташовано за замовчуванням</nav>
<hr>
<h2 id="table">Використання тегу <code>H2</code></h2>

JS

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

var textArray = { 'left': 'Вирівнювання по лівій частині.',
  'center': 'Вирівнювання по центру.',
  'right': 'Вирівнювання по правій частині.',
  'justify': 'Вирівнювання по ширині.' };

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;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

HTML

<h2 align="center">align="center"</h2>
<h2 align="right">align="right"</h2>
<h2 align="middle">align="middle" — браузер читає це як center</h2>
<h2 align="junk">align="junk" — значення проігноровано</h2>

<p class="head">Головна різниця: блоковий нащадок</p>
<h2 align="center"><span class="box">align="center" центрує й цей блок</span></h2>
<h2 class="ta"><span class="box">text-align: center лишає його ліворуч</span></h2>

<p class="head">Стилі перекривають атрибут</p>
<h2 align="center" class="left">align="center" плюс text-align: left</h2>

<p class="head">Як центрують заголовок сьогодні</p>
<h2 class="ta">text-align: center — центрує текст</h2>
<div class="w600"><h2 class="auto">margin: auto — центрує сам заголовок</h2></div>

CSS

h2 {
    max-width: 600px;
    margin: 8px 0;
    padding: 6px 8px;
    background: #eef3fb;
    font: 600 20px/1.4 system-ui, sans-serif;
}

.head {
    margin: 24px 0 6px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.box {
    display: block;
    width: 260px;
    padding: 4px 6px;
    background: #cddffa;
    font-size: 16px;
}

.ta {
    text-align: center;
}

.left {
    text-align: left;
}

.w600 {
    max-width: 600px;
}

.auto {
    width: 340px;
    margin: 8px auto;
    background: #e6f5ea;
}

<h2 align="center">Використання тегу <code>H2</code></h2>
<p><code>H1</code> визначає найбільш важливі заголовки, а <code>h6</code> визначає найменш важливі заголовки (<code>h1</code> заголовки повинні бути основними заголовками, потім слідують заголовки <code>h2</code> і так далі). </p>
<br>
<h2 align="right">Використання тегу <code>H2</code></h2>
<p><code>H1</code> визначає найбільш важливі заголовки, а <code>h6</code> визначає найменш важливі заголовки (<code>h1</code> заголовки повинні бути основними заголовками, потім слідують заголовки <code>h2</code> і так далі). </p>