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

HTML

<div class="ramka">
    <h3 align="center">align="center"</h3>
    <h3 align="right">align="right"</h3>
    <h3>без атрибута — початок рядка</h3>
    <h3 align="CENTER">align="CENTER" — регістр не важить</h3>
    <h3 align="middle">align="middle" — тихо працює як center</h3>
    <h3 align="justify">align="justify" — довгий заголовок, у якому видно, як
        рядки розтягуються рівно по всій ширині аж до самого правого краю</h3>
    <h3 align=" right " class="bad">align=" right " із пробілами — не діє</h3>
    <h3 align="char" class="bad">align="char" — чуже значення, теж не діє</h3>
</div>

<p class="head">Успадкування: один align на обгортці</p>
<div align="center" class="ramka spadok">
    <h3>заголовок усередині div align="center"</h3>
    <p>і абзац, якого ніхто не чіпав</p>
    <p>і другий абзац, якого теж ніхто не чіпав</p>
    <h3>і вкладений <span>span усередині заголовка</span></h3>
</div>

<p class="head">Хто кого перекриває</p>
<div class="ramka">
    <h3 align="right" class="css">align="right", але в стилях text-align: left</h3>
    <h3 align="right" style="text-align:center">align="right", але свій style</h3>
    <h3 class="blok-po-centru">text-align тут не при чому: блок посунуто
        шириною й margin: auto — видно по рамці</h3>
</div>

CSS

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

.ramka {
    max-width: 560px;
    padding: 4px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.ramka h3 {
    margin: 10px 0;
    padding: 4px 6px;
    background: #eef3fb;
    font-size: 1.05em;
}

.ramka p {
    margin: 8px 0;
}

.spadok {
    border: 2px solid #e0a800;
    background: #fff6d8;
}

.bad {
    outline: 2px dashed #d64545;
    outline-offset: 2px;
}

.css {
    text-align: left;
}

.blok-po-centru {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    outline: 2px solid #2f6fd0;
}

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

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>
<h3 id="table">Використання тегу <code>H3</code></h3>

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