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

HTML

<p>Вирівнювання по центру</p>  
<div class="block1" align="center">Собаки здавна є помічниками людей. 
   Вміють виконувати команди. Вони несуть службу на кордоні, митниці. Собаки - гарні рятівники. Вони допомагають шукати людей.  </div><br><br>
<p>Вирівнювання по правому краю</p> 
  <div class="block2" align="right">Тварини служать поводирями для незрячих та немічних. А ще вони надійні друзі, сумують без своїх господарів.
   Про цих помічників знімають фільми, пишуть у книжках. </div> <br>
<p class="bloc">Вирівнювання по ширині</p> 
<div class="block3" align="justify">Собаки здавна є помічниками людей. 
   Вміють виконувати команди. Вони несуть службу на кордоні, митниці. Собаки - гарні рятівники. Вони допомагають шукати людей.  </div>

CSS

.block1 { 
    width: 200px; 
    background: #ccc;
    padding: 5px;
    padding-right: 20px; 
    border: solid 1px black; 
   }
   .block2 { 
    width: 200px;  
    padding: 5px; 
    border: solid 1px black; 

   }
  .block3 { 
    width: 200px;  
    padding: 5px; 
    background: #ccc;
    border: solid 1px black;  
    left: 30px; 
   }

HTML

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

<select id="form">
   <option value="left" name="value">left</option>
  <option value="right" name="value">right</option>
   <option value="center" name="value">center</option>
   <option value="justify" name="value">justify</option>
</select>
  </p>
<nav id='text'>Зображення розташована за замовчувнням</nav>
<hr>
<div class="block1" id="block1">Собаки здавна є помічниками людей. 
   Вміють виконувати команди. Вони несуть службу на кордоні, митниці. Собаки - гарні рятівники. Вони допомагають шукати людей.  </div><br><br>

CSS

.block1 { 
    width: 200px; 
    background: #ccc;
    padding: 5px;
    padding-right: 20px; 
    border: solid 1px black; 
   }

JS

var wrapper = document.getElementById('block1');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'left': 'Вирівнювання вмісту контейнера по лівому краю.',
  'right': 'Вирівнювання вмісту контейнера по правому краю.',
  'center': 'Вирівнювання вмісту контейнера по центру.',
  'justify': ' Вирівнювання вмісту контейнера по ширині.' };

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 align="center" class="outer">
  <div class="box">align="center"</div>
</div>

<div class="outer css">
  <div class="box">text-align: center</div>
</div>

<div class="outer">
  <div class="box auto">margin-inline: auto</div>
</div>

CSS

.outer {
  border: 1px dashed #94a3b8;
  padding: 10px;
  margin-bottom: 12px;
  font: 15px/1.4 system-ui, sans-serif;
}

.box {
  width: 220px;
  padding: 8px;
  background: #e0e7ff;
  border-radius: 4px;
}

.css {
  text-align: center;
}

.auto {
  margin-inline: auto;
}