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:
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?
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>
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.
<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.
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>