Атрибут align тега <iframe> — вирівнювання рамки в тексті

<p>Приклад використання атрибута <code>align="right</code></p>
<iframe name = "myframe" width = "150px" height = "150px" src = "https://picsum.photos/100/100" align="right" ></iframe>
  <p>Літо - це пора року, яке радує своїми барвами, різноманітними квітами. Літо – кольоровий сезон! Найбільше, звичайно, в літній порі зеленої фарби. Трава зелена, листя на деревах і кущах теж зелені!</p><br> <br> <br> 
<p>Приклад використання атрибута <code>align="left" </code></p>
<iframe name = "myfram" width = "150px" height = "150px" src = "https://picsum.photos/100/100" align="left" ></iframe>
 <p>Літо - це пора року, яке радує своїми барвами, різноманітними квітами. Літо – кольоровий сезон! Найбільше, звичайно, в літній порі зеленої фарби. Трава зелена, листя на деревах і кущах теж зелені!</p>
 <br>

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">Тут знаходиться 
     <iframe id="image" title="Демонстраційна рамка" srcdoc="<p style='font:14px sans-serif;margin:6px'>Документ усередині рамки</p>" width="130" height="130"></iframe>
      ваш текст
    </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

HTML

<div class="col">
    <p class="head">align="right" — текст обтікає, це браузер досі вміє</p>
    <iframe align="right" width="120" height="60" srcdoc="<p style='margin:0;font:13px sans-serif;background:#f3fbf4'>right</p>"></iframe>
    <p>Текст поруч із фреймом, який обтікає його ліворуч. Текст поруч із фреймом, який
        обтікає його ліворуч. Текст поруч із фреймом, який обтікає його ліворуч.</p>
</div>

<div class="col">
    <p class="head">align="center" — фрейм лишився біля лівого краю</p>
    <iframe align="center" width="120" height="60" srcdoc="<p style='margin:0;font:13px sans-serif;background:#fdeeee'>center</p>"></iframe>
</div>

<div class="col">
    <p class="head">display: block і margin: 0 auto — ось це центрує</p>
    <iframe class="mid" width="120" height="60" srcdoc="<p style='margin:0;font:13px sans-serif;background:#f3fbf4'>по центру</p>"></iframe>
</div>

<div class="col">
    <p class="head">Смужка під рядковим фреймом</p>
    <div class="gapbox"><iframe width="120" height="60" srcdoc="<p style='margin:0;font:13px sans-serif;background:#eef3fb'>рядковий</p>"></iframe></div>
    <div class="gapbox"><iframe class="nogap" width="120" height="60" srcdoc="<p style='margin:0;font:13px sans-serif;background:#eef3fb'>vertical-align: middle</p>"></iframe></div>
</div>

CSS

.col {
    width: 520px;
    margin-bottom: 18px;
    padding: 8px 10px;
    border: 1px solid #b9c6d8;
    background: #f6f9ff;
    overflow: hidden;
}

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

p {
    margin: 8px 0;
}

iframe {
    border: 0;
    outline: 2px dashed #d64545;
    outline-offset: 2px;
}

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

.gapbox {
    display: inline-block;
    margin-right: 12px;
    background: #ffe9b0;
    outline: 1px solid #c0392b;
}

.nogap {
    vertical-align: middle;
}