CODEWITHSUNDEEP
htmlcssalignmentparagraph
Richard
Richard

Reputation: 6116

HTML Paragraph with Perfect Alignment

I want to perfectly align a paragraph so that the entire paragraph is in the center of the page but the left and right side are perfectly aligned. Here's a picture example of a paragraph that is perfectly aligned: enter image description here

The paragraph looks like it's in a box of some sort, with perfectly straight left and right side. How do I do this in css or html?

Upvotes: 2

Views: 16671

Answers (5)

Mayur Vora
Mayur Vora

Reputation: 962

Try this to solve your problem:

put STYLE code inside external CSS file or <head><style> Write style code here..</style></head>
.proper_alignment_paragraph_class  
{  
  text-align:justify;  
  text-justify:inter-word;  
}
Put this code inside <body></body> tag.  

<div class="proper_alignment_paragraph_class">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Upvotes: 0

bonCodigo
bonCodigo

Reputation: 14361

<html>
<head>
<style>
div
{
text-align:justify;
text-justify:inter-word;
}
</style>
</head>

<body>
<h1>Perfect Box Type Alignment</h1>
<div>I want to perfectly align a paragraph so that the entire paragraph is in the center of the page but the left and right side are perfectly aligned. Here's a picture example of a paragraph that is perfectly aligned:I want to perfectly align a paragraph so that the entire paragraph is in the center of the page but the left and right side are perfectly aligned. Here's a picture example of a paragraph that is perfectly aligned::</div>
</body>

</html>

Please resize the browser window to full to see how this works.

Upvotes: 0

DF_
DF_

Reputation: 3973

Well, the perfect spacing between the words is done by justifying the text:

p {
    text-align:justify;
    text-justify:inter-word;
}

The positioning of the paragraph in the centre of the page needs a common set of rules:

p {
    width: auto;
    margin: 0 auto;
}

The margin rule sets the top and bottom margin of the paragraph for 0 (modify this to adequate spacing if you wish), and the auto makes sure that the left and right margins are the same.

Upvotes: 0

MikeSmithDev
MikeSmithDev

Reputation: 15797

CSS to justify text:

style="text-align:justify"

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

The wrapper needs to have text justification applied via CSS:

text-align:justify;
text-justify:inter-word;

In general, browsers do a crappy job as fully-justified text compared to "typesetting" applications for print. In general, full-justification on browsers makes text HARDER to read and should generally be avoided.

css:

.justify {
    text-align:justify;
    text-justify:inter-word;
}

HTML

<div class="justify"> ...your text...  </div>

Upvotes: 4

Related Questions