CODEWITHSUNDEEP
htmlcsstextalignmentjustify
AshleyN
AshleyN

Reputation: 31

Align and Justify Text with HTML

I'm wanting to align the text in my blog posts with the edges of my images. Right now the body of text is slightly skewed to the left. And also, what code do I need to enter so that the text is justified and where exactly do I enter it?

The site is: http://www.studywithstyleblog.com

And below is some of the code:

.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%;
}

Thanks for your help!

Upvotes: 1

Views: 1093

Answers (2)

Rai Ammad Khan
Rai Ammad Khan

Reputation: 1561

The following line will justify your text: 

  text-align: justify;

I was trying to move the text slightly to the right. But it is impossible to implement in your code. You must have to change your code.There is 1 way to do it

1) Change the class of your paragraphs/text divs to "separator2" instead of "separator" and modify your CSS file like below:

.separator2
{
margin-left:20px
}

Adjust the margin-left accordingly. I have just added dummy value.

Upvotes: 0

D Hardy
D Hardy

Reputation: 11

The problem is in your code on your page. You have <div> tags around your paragraphs instead of <p> tags.

The beginning of your faux-paragraphs are:

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

If you can change that "text-align" to justify instead of left, you'll be golden.

If you can get away from the inline CSS, you'll be better for it in the long run too.

Upvotes: 1

Related Questions