使用 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) 将段落/文本 div 的类更改为“separator2”而不是“separator”，并修改您的 CSS 文件，如下所示：

.separator2
{
margin-left:20px
}

相应地调整左边距。我刚刚添加了虚拟值。