Атрибут align тега <input> — вирівнювання кнопки-картинки

HTML

<p class="head bad">1. input type="text" align="center" — не робить нічого</p>
<div class="blok">текст перед <input type="text" align="center" value="звичайне поле"> текст після</div>

<p class="head good">2. Те саме, чого від нього хотіли: text-align і margin у CSS</p>
<div class="blok"><input type="text" class="po-centru" value="текст по центру"></div>

<p class="head bad">3. input type="image" align="left" — це float, блок утратив висоту</p>
<div class="blok">текст перед <input type="image" align="left" width="60" height="60" alt="кнопка"
  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Crect%20width='60'%20height='60'%20fill='%23d64545'/%3E%3C/svg%3E"> текст після, який тепер обтікає картинку зліва</div>

<p class="head">4. align="top" — це просто vertical-align: top</p>
<div class="blok">текст перед <input type="image" align="top" width="60" height="60" alt="кнопка"
  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Crect%20width='60'%20height='60'%20fill='%232f6fd0'/%3E%3C/svg%3E"> текст після</div>

<p class="head bad">5. align=" left " із пробілами — вимкнено мовчки</p>
<div class="blok">текст перед <input type="image" align=" left " width="60" height="60" alt="кнопка"
  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Crect%20width='60'%20height='60'%20fill='%23e0a800'/%3E%3C/svg%3E"> текст після</div>

<p class="head good">6. align="left", але float: none у стилях — виграє CSS</p>
<div class="blok">текст перед <input type="image" class="bez-float" align="left" width="60" height="60" alt="кнопка"
  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Crect%20width='60'%20height='60'%20fill='%233a9a4f'/%3E%3C/svg%3E"> текст після</div>

CSS

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

.bad {
    color: #c0392b;
}

.good {
    color: #1b5e20;
}

.blok {
    max-width: 460px;
    padding: 4px 8px;
    border: 2px dashed #b9c6d8;
    background: #f6f9ff;
}

input[type="text"] {
    padding: 5px 8px;
    font: inherit;
}

.po-centru {
    display: block;
    width: 260px;
    margin: 0 auto;
    text-align: center;
}

.bez-float {
    float: none;
}

HTML

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

<select id="form">
   <option value="left" name="value">left</option>
  <option value="top" name="value">top</option>
   <option value="right" name="value">right</option>
   <option value="bottom" name="value">bottom</option>
  <option value="middle" name="value">middle</option>
</select>
  </p>
<nav id='text'>Зображення розташована за замовчувнням</nav>
<hr>

<div class="block1" >
   
  <p class = "text">Тут знаходиться 
    <input id="image" type="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зима"/>
      ваш текст
    </p>
</div>

CSS

*{
  text-align:center;
}

JS

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

var textArray = { 'left': 'Зображення  розташована на лівій частині екрану.',
  'top': 'Зображення вирівняне по верхній межі рядка',
  'right': 'Зображення  розташована на правій частині екрану.',
  'bottom': 'Зображення вирівнюванне по нижній межі рядка',
  'middle': ' зображення вирівнюванне по базовій лінії поточного рядка' };

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