Web Hosting Directory | Web Hosting Resources | Webmaster Resources | Domain Tools | Search Engine Marketing | Forums
  Signup
Today: 49   Yesterday: 1,557   Max: 1,872   Total: 377,324   Current Users : 14 (Member 0) 
DOMAIN TOOLS

WEBMASTER TOOLS

RELATED ARTICLES

SUBMIT AN ARTICLE

Write for us and get publicity, link to your website, and best of all get paid. Please visit our writers page for details.


LINK TO US

Link to us and earn points for each visitor you bring to us. Please visit our link partner page for details.

 

Text Alignment

You can set the alignment of any HTML element using the text-align style rule. text-align can be used to set the alignment for a paragraph, a section of the document, or even the whole document. text-align can be used to set alignment to left, right, center, or justified.

For example, suppose we want to center a paragraph. First, we'll create a styles class called centeralign by putting the following code into the <HEAD> section of the document:

<STYLE TYPE="text/css">
<!--
.centeralign {text-align:center}
-->
</STYLE>

Now we can set any paragraph to centeralign class like this:

<P CLASS="centeralign">
Get Centered
</P>

which gives us

Get Centered

We can apply the same class to a <DIV ...> element to center a section of the page:

<DIV CLASS="centeralign">

This is a center aligned bunch of text

<P>

It stays center aligned because it is within 
a DIV which has a center aligned style. 

<P>

Each element within the center aligned DIV 
inherits the center aligned style.

</DIV>

which gives us

This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

If we want to center everyting on the page, the easiest thing to do is to apply the style rull to the <BODY ...> element instead of using a class. So, to enter the whole page we would simply put the following style in the <HEAD> section of the document. No further code is needed:

<STYLE TYPE="text/css">
<!--
BODY {text-align:center}
-->
</STYLE>

which is used in this page.

The same concepts can be applies to text-align:left, text-align:right, and text-align:justify (discussed in more detail in the next page). So, for example, we could rigt-align a paragraph by first copying this code into the <HEAD> section of the document:

<STYLE TYPE="text/css">
<!--
.rightalign {text-align:right}
-->
</STYLE>

and then applying the class to a paragraph:

<P CLASS="rightalign">

Get Right.

</P>

which gives us

Get Right.



Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.

 
 
What is your major source of website traffic?
 
 
 
 
 
 

ADVERTISEMENT

 
Cheap Web HostingBudget Web HostingEcommerce Web Hosting
Link to UsLink ExchangeAdvertisePrivacy PolicyTerms Of ServiceAbout UsContact UsSitemap
Copyright © 2006 - 2008 Broadband Media, Inc. All rights reserved.