<p>Значення(ключові слова) для властивості <code>vertical-align</code>, які найчастіше використовуються:</p>
<hr>
<select id="form">
  <option value="baseline">baseline</option>
  <option value="sub">sub</option>
  <option value="super">super</option>
  <option value="top">top</option>
  <option value="middle">middle</option>
  <option value="bottom">bottom</option>
</select>
<hr>

<p class="example"><span id="text">Це приклад роботи властивості: </span><strong>example</strong></p>
body {
  font-family: monospace;
  font-size: 17px;
  line-height: 1.54;
}

strong {
  color: coolgrey;
  border: 1px solid orange;
}

#text {
  text-decoration: overline underline;
}
var text = document.getElementById('text');
var form = document.getElementById('form');

form.onchange = function() {
  for (var i = 0; i < form.options.length; i++) {
    if (form.options[i].selected == true) {
      text.style.verticalAlign = form.options[i].value;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.