Атрибут align тега <hr> — вирівнювання горизонтальної лінії

HTML

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

<select id="form">
   <option value="center" name="value">center</option>
   <option value="left" name="value">left</option>
   <option value="right" name="value">right</option>
</select>
  </p>
<nav id='text'>Значення align встановлено за замовчувнням</nav>
<br><br>
<hr id="type" width="300">
  <p>Найважливіше призначення книги – зберігати знання, накопичені віками, і передати їх наступним поколінням. Завдяки цьому став можливий стрімкий прогрес людства  в останні століття в галузі науки. </p>
 <hr id="Type" width="300">

JS

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

var textArray = { 'left': 'Вирівнювання за горизонтальною лінією встановленою зліва',
  'right': 'Вирівнювання за горизонтальною лінією встановленою справа',
  'center': 'Вирівнювання за горизонтальною лінією встановленою посередині' };

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);
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(1)) break;
    if (form.options[i].selected == true) {
      wrappe.align = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(1);
};
//# sourceURL=pen.js

<p>З використанням атрибуту <code>align="left"</code></p>
<hr align="left" width="300">
  <p>Найважливіше призначення книги – зберігати знання, накопичені віками, і передати їх наступним поколінням. Завдяки цьому став можливий стрімкий прогрес людства  в останні століття в галузі науки. </p>
 <hr align="left" width="300"> 
<br>
<p>З використанням атрибуту <code>align="right"</code></p>
<hr align="right" width="300">
  <p>Найважливіше призначення книги – зберігати знання, накопичені віками, і передати їх наступним поколінням. Завдяки цьому став можливий стрімкий прогрес людства  в останні століття в галузі науки. </p><hr align="right" width="300">

HTML

<p class="cap">Атрибути, як їх досі малює браузер:</p>
<div class="box">
    <p class="lbl">align="left" width="200"</p>
    <hr width="200" align="left">
    <p class="lbl">align="right" width="200"</p>
    <hr width="200" align="right">
    <p class="lbl">size="10" color="#2f6fd0" width="200" — колір робить рамку суцільною</p>
    <hr width="200" size="10" color="#2f6fd0">
    <p class="lbl">size="10" noshade width="200"</p>
    <hr width="200" size="10" noshade>
</div>

<p class="cap">Дві пастки:</p>
<div class="box left-aligned">
    <p class="lbl">Блок має text-align: left, лінія — width: 200px.
        Вона все одно посередині: рухають її відступи, а не вирівнювання тексту.</p>
    <hr class="narrow">
    <p class="lbl">hr із background-color: red і без інших правил — не видно
        нічого: висота елемента типово нульова, видно лише власну рамку.</p>
    <hr class="only-bg">
</div>

<p class="cap">Робочі заміни:</p>
<div class="box">
    <p class="lbl">margin-left: 0; margin-right: auto — оце й посуває лінію</p>
    <hr class="narrow to-left">
    <p class="lbl">border: none; height: 6px; background: #d64545</p>
    <hr class="solid">
    <p class="lbl">border: none; height: 8px; background: linear-gradient(...)</p>
    <hr class="fancy">
</div>

CSS

.cap {
    max-width: 560px;
    margin: 20px 0 6px;
    font-weight: 600;
}

.box {
    max-width: 560px;
    padding: 4px 14px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    background: #f9fbff;
}

.left-aligned {
    text-align: left;
}

.lbl {
    margin: 14px 0 4px;
    color: #5a6472;
    font: 13px/1.5 ui-monospace, monospace;
}

.narrow {
    width: 200px;
}

.only-bg {
    width: 200px;
    background-color: red;
}

.to-left {
    margin-left: 0;
    margin-right: auto;
}

.solid {
    width: 200px;
    margin-left: 0;
    border: none;
    height: 6px;
    background: #d64545;
}

.fancy {
    width: 100%;
    margin-left: 0;
    border: none;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #2f6fd0, #72b043, #f2b134);
}