Атрибут align тега <img> — розміщення зображення

HTML

<div class="block1" >
  <p>Зображення вирівняне по лівому краю</p>
   <img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='500' 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="Зима" align="left"/>
  <div class = "text">
      <br>
      Марія Познанська
    <br><br>
         ВИПАВ СНІГ
    <br><br>
    Ой у лісі лист зів'яв! <br>
    Білий сніг у лісі впав<br> 
    На дубочки молоденькі,<br>
    На ялинки зелененькі.<br>
    <br>
    Притрусив сніг доріжки, <br>
    Всі горбочки, моріжки. <br>
    Біло-біло в лісі стало —<br> 
    Так багато снігу впало!<br>
    </div>
</div>

<div class="block2">
    <p>Зображення вирівняне по правому краю</p>
       <img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='500' 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="Зима" align="right"/>
  <div class = "text">
      <br>
      Марія Познанська
    <br><br>
         ВИПАВ СНІГ
    <br><br>
    Ой у лісі лист зів'яв! <br>
    Білий сніг у лісі впав<br> 
    На дубочки молоденькі,<br>
    На ялинки зелененькі.<br>
    <br>
    Притрусив сніг доріжки, <br>
    Всі горбочки, моріжки. <br>
    Біло-біло в лісі стало —<br> 
    Так багато снігу впало!<br>
    </div>
</div>

CSS

*{
  text-align:center;
}

.block1 , .block2{
  border:1px solid;
  
  float:left;
}

img{
  Width:50%;
}

HTML

<p><img align="left" width="60" height="60" alt="квадрат"
        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
   align="left" — картинка притиснута до лівого краю, а текст обгортає її праворуч.
   Це те саме, що float: left у CSS.</p>

<p>Текст у рядку, <img align="middle" width="40" height="40" alt="квадрат"
        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
   а це align="middle" — картинка по середині висоти рядка.</p>

<p>Текст у рядку, <img align="center" width="40" height="40" alt="квадрат"
        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
   а це align="center" — по горизонталі не змінилося нічого.</p>

<p><img class="center" width="60" height="60" alt="квадрат"
        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></p>

<p>Вище — CSS: display: block; margin: 0 auto</p>

CSS

p {
  font: 15px sans-serif;
  margin: 0 0 14px;
  display: flow-root;
}

img { background: #4a7ab5; }

.center {
  display: block;
  margin: 0 auto;
}

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">Тут знаходиться 
    <img id="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 wrapper = 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) {
      wrapper.align = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js