Web Tutorials: Centering Text & Justification
In a previous parts of this tutorial, I talked about using CSS to center text with the text-align:center attribute and centering images with the margin:auto setting. This article picks up where that they left off and talks about centering text with aligned margins.
Auto Margins to Center Text
On the first part of our centering tutorial, when we centered text that was longer than a single line using the text-align: center technique, it created text that was displayed with jagged left and right margins like the paragraph below.
Here's a bit of centered text using the text-align attribute set to center. Each line is centered independently from the others which creates an uneven, step-like alignment of the text.
To center your block of text and to eliminate the uneven left margin, use the auto margins like we talked about in centering images and set a width for your paragraph. Using an inline style definition, you would use something like the following:
<p style="margin-left: auto; margin-right: auto; width: 20em">Your centered text here.</p>
As you can see, this paragraph is 20em wide and fully centered on the page. Our paragraph is fully aligned down the left margin.
To make your paragraph fully centered and justified, simply add text-align: justify to your style definition and your paragraph will look like the one shown below.
As you can see, this paragraph is 20em wide, fully centered on the page and justified on both the left and right sides.
Because paragraphs are already classified as block-elements, you do not need the display:block definition like we did when centering an image.
Other Centering Techniques
HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming or MySpace related tutorials you would like to see.