<div class="container">
  <p class="text  text--left">
     Данный текст выровнен по левой стороне.
  </p>
  
  <p class="text  text--right">
     Данный текст выровнен по правой стороне.
  </p>
  
  <p class="text  text--center">
     Данный текст выровнен по центру.
  </p>
  
  <p class="text  text--justify">
     Данный текст равномерно распределён по всей ширине контейнера.
  </p>
</div>
.container {
  box-sizong: border-box;
  width: 220px;
  margin: 10px auto;
  padding: 0 20px;
  border: 4px solid gray;
  font-size: 16px;
  line-height: 1.25;
}

.text {
  background: PapayaWhip;
}

.text--left {
  text-align: left;
}

.text--right {
  text-align: right;
}

.text--center {
  text-align: center;
}

.text--justify {
  text-align: justify;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.