How to Left, Right, Center Align With CSS

Instead of using HTML alignment attributes with the HTML tags that markup text, the best practice for web designers is to move the presentation (alignment options) information to the stylesheet. This article will explain how to align text and how to center larger page elements such as divs.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Text editor
• HTML editor
• Basic HTML knowledge

How to Align Text

1. To align text within a normal block of text such as a paragraph or a blockquote, use the text-align property.

2. Left, right and center aligned text

   The value choices for the test-align property are left, right, center and justify. Since justified text is not very readable on the Web, the illustration only shows left, right and center. In this illustration, each paragraph has a black border to demonstrate the size of the block element on the page if no set width is applied to the element.

3. Normally an element is assigned to an id or class. The text alignment of any items in that id or class is set with a rule such as one of these:

   #left {
   text-align: left;
   }
   #right {
   text-align: right;
   }
   #center {
   text-align: center;
   }

How to Center Divs, Wrapper Divs and Body

1. You may want to center an entire layout or a large division of a layout. In such cases you use a different CSS technique.

2. You apply the CSS rule to the larger element selector you want centered. It might be the body element, a wrapper div or a container div.

3. Centering by this method does not affect text alignment. The centered element will retain the default left alignment of text within the centered element.

4. A centered layout

   The following is an illustration of an entire body element (with a black border for clarification purposes) centered on a page. A width must be set for the element, then the left and right margins are set to auto. Here's how:

   body {
   width: 80%;
   margin-right: auto;
   margin-left: auto;
   border: 1px solid black;
   }

Tips & Warnings

• It normally isn't necessary to use align-left since left alignment is the default. However, you need to be aware that it exists in case you have to reset previously centered or right-aligned text to the default in subsequent use.

• The width of the element to be centered can be set in pixels, percentages or ems.

Resources

• CSS text-align Property