使用HTML对齐和对齐文本

时间:2014-06-20 02:23:19

标签: html css text alignment justify

我想将博客文章中的文字与图片的边缘对齐。现在,文本正文略微向左倾斜。而且,我需要输入什么代码才能使文本合理,我在哪里输入它?

该网站是: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%;
}

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

问题出在您网页上的代码中。 您的段落周围有<div>个标签,而不是<p>标签。

你的虚假段落的开头是:

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

如果您可以更改“text-align”以证明而不是左派,那么您将是金色的。

如果你可以远离内联CSS,那么从长远来看你也会更好。

答案 1 :(得分:0)

以下行将证明您的文字:

  text-align: justify;

我试图将文字稍微向右移动。但是在代码中无法实现。你必须要改变你的代码。有一种方法可以做到这一点

1)将您的段落/文本div的类更改为“separator2”而不是“separator”,并修改您的CSS文件,如下所示:

.separator2
{
margin-left:20px
}

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