Выравнивание текста

Горизонтальное выравнивание текста определяет внешний вид и характер содержания в пределах элемента.

Для того чтобы задать выравнивание с заданными параметрами используются следующие варианты записей:


text-align : left;
text-align : right;
text-align : center;
text-align : justfy;

left – задаёт выравнивание текста по левому краю

right – горизонтальное выравнивание текста по правому краю

center – расположение текста по центру

justfy – выравнивание по левому и правому краю одновременно. В данном случае текст будет выравниваться по ширине


HTML

<div class="box">
  <p>
    Текст слева.
  </p>
</div>


CSS

body {
    height: 100%;
    padding-top: 45px;
    background-color: #eaeaea;
    font-family: Arial, Helvetica, sans-serif;
}
.box{
    width: 300px;
    margin: 0px auto;
    padding: 3px 20px;
    background-color: #fc0;
}
.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: left;
}


HTML

<div class="box">
  <p>
    Текст справа.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: right;
}


HTML

<div class="box">
  <p>
    Текст по центру.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}


HTML

<div class="box">

<h1>Текст по левому и правому краю</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse blandit magna sed nulla egestas, nec mollis nibh pharetra.
Aliquam non tortor sit amet lacus feugiat lobortis a vitae arcu.
Quisque molestie leo eget quam interdum, sit amet sodales tellus viverra.
Maecenas finibus sed nibh ac gravida. Sed vulputate mi in nisl bibendum,
sed lobortis neque maximus. Fusce condimentum eget sem eget placerat.
In hac habitasse platea dictumst.</p>

</div>


CSS

.box{
    width: 350px;
    margin: 0px auto;
    padding: 3px 20px;
    background-color: #fc0;
}
.box p{
    font-size: 16px;
    text-align: justify;
}
.box h1{
    font-size: 20px;
    text-align: center;
}