Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

General HTML

2010051501 Email to Ronx
 

Centred Paragraphs

How to centre a paragraph or page


The next paragraph is centred.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non est vel odio hendrerit dignissim at quis dui. Fusce laoreet erat non urna lacinia porta. Maecenas ac metus lacus, nec convallis ligula. Cras in eros in felis rutrum varius vel eu dolor. Nunc lorem erat, adipiscing non aliquam elementum, accumsan sed mi. Mauris urna eros, suscipit sit amet tristique rhoncus, venenatis a nunc. Cras eget nunc quam, a mattis libero. Etiam sit amet auctor dolor. Vivamus pretium iaculis justo vitae faucibus. Nulla orci nisi, accumsan sed semper ac, bibendum id erat.

 To achieve this requires three things:

  1. A complete and valid doctype
  2. Left and right margins set to auto
  3. A fixed width

The doctype is the first line in Code view - in this case XHTML1.0 transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The paragraph has the margins and width (and also background colour) set in CSS using an inline style:

<p style="margin-left: auto; margin-right: auto; width:350px; background:#eee;">

The style could also be defined using an embedded style block in the head section of the page, or in an external style sheet. The last two options are usually better choices since the styles can be reused. This paragraph also has a background colour defined to make it stand out.

Notice that the paragraph is centred within its parent container (in this case the <div> in the page containing the page content. The paragraph below uses exactly the same code, but is placed within an offset <div>. This shows the paragraph is centred within the <div>, which is its parent container. The <div> is offset by setting it's left margin to 60px, and adding 3px of padding.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non est vel odio hendrerit dignissim at quis dui. Fusce laoreet erat non urna lacinia porta. Maecenas ac metus lacus, nec convallis ligula. Cras in eros in felis rutrum varius vel eu dolor. Nunc lorem erat, adipiscing non aliquam elementum, accumsan sed mi. Mauris urna eros, suscipit sit amet tristique rhoncus, venenatis a nunc. Cras eget nunc quam, a mattis libero. Etiam sit amet auctor dolor. Vivamus pretium iaculis justo vitae faucibus. Nulla orci nisi, accumsan sed semper ac, bibendum id erat.

The same principle applies to centering the entire page content - wrap the page content in a <div>, give the div a width and set lft and right margins to zero. For best results, also set the <body> margins to zero.

A style block to do this would be similar to:

<style>
body {margin:0; padding:0;}
#wrapper {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
width: 760px;
}
</style>

A "shorthand" version is:

<style>
body {margin:0; padding:0;}
#wrapper {
margin: 0 auto;
width: 760px;
}
</style>

and the width can, of course, be changed to suit the page layout requirements.