Выравнивание и выравнивание текста с помощью HTML

Question

Я хочу выровнять текст в своих сообщениях в блоге по краям моих изображений. Прямо сейчас тело текста слегка перекошено влево. А также, какой код мне нужно ввести, чтобы текст был обоснован, и где именно я должен его ввести?

Сайт находится по адресу: http://www.studywithstyleblog.com/

И ниже приведен фрагмент кода:

.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: 0em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
width: 700px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 3px;
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
float: none;
width: 700px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}

Спасибо за вашу помощь!

Answer 1

Проблема в вашем коде на вашей странице. У тебя есть <div> теги вокруг ваших абзацев вместо <p> теги.

Начало ваших поддельных абзацев:

<div class="separator" style="clear: both; text-align: left;">

Если вы можете изменить это "выравнивание текста", чтобы оправдать вместо левого, вы будете золотой.

Если вам удастся уйти от встроенного CSS, то в конечном итоге вам это будет лучше.

Answer 2

Следующая строка оправдает ваш текст:

  text-align: justify;

Я пытался переместить текст немного вправо. Но это невозможно реализовать в вашем коде. Вы должны изменить свой код. Есть 1 способ сделать это

1) Измените класс ваших параграфов / текстовых divs на "separator2" вместо "separator" и измените ваш CSS-файл, как показано ниже:

.separator2
{
margin-left:20px
}

Отрегулируйте поля слева соответственно. Я только что добавил фиктивную ценность.