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

<select id="form">
  <option value="left" name="value2" selected>left</option>
  <option value="center" name="value2">center</option>
  <option value="right" name="value2">right</option>
  <option value="justify" name="value2">justify</option>
</select>

<p id="text"></p>

<hr>

<p id="block">Привіт. Я текст :)</p>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
}
var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

  var textArray = {'left': 'Вирівнювання тексту по лівій стороні',
                   'right': 'Вирівнювання тексту по правій стороні',
                   'center': ' 	Вирівнювання тексту по центру',
                   'justify': 'Вирівнювання тексту по ширині. Текст розтянеться від лівого краю до правого (як в газетах і журналах).'};

form.onchange = function change() {
  
  var newVal = getNewValue();  
  block.style.textAlign = newVal;
  text.innerHTML = textArray[newVal];
  
}

function getNewValue() {
  
  var result = '';
  
  for (var i = 0; i < form.options.length; i++) {
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }
  
  return result;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.