1. Technology
Send to a Friend via Email

CSS Align


Is there a CSS Align Property?:

No, there is not a CSS align property.

Many beginners, when starting out with CSS want it to have the same features as HTML. And HTML has an align attribute.

But, while a CSS align property could be useful, CSS is more flexible than that. Instead of having just one CSS align property, CSS offers many different ways to align your page elements, depending upon how you want to align them and what type of elements they are.

Align Text with CSS:

CSS aligns text in two ways: horizontally and vertically. So there are two CSS properties you can use to align text:

You can align text horizontally to the left, center, right, or justified. See some examples of text-align.

You can align text vertically to the top, bottom, center, text top, text bottom, subscript, and superscript. See some examples of vertical-align.

Align Page Elements with CSS:

But you can align more than just text with CSS. You can use CSS to align your page elements and build your page layout.

CSS uses the float property to align page elements.

The easiest way to think about the float property is to imagine that all your layout blocks are in a line in the HTML. When none of them are floated, they all appear in the order they are written in the HTML, one after the other. When an element is floated, it becomes like a rock in a stream: float:right; pushes that block to the right, and all other elements flow around it to the left. float:left; pushes that block to the left, and all other elements float around it to the right.

Center Anything with CSS Alignments:

One of the most popular CSS alignments is centering. And many beginners are frustrated because they are told not to use the CENTER tag. Luckily, CSS gives you lots of options to center anything on your page. Here is a page of examples of how centered content looks when using CSS to create this alignment.

Use CSS Alignments Effectively in Your Layouts:

The most common layout alignment is flush left and many designers use it exclusively. Another popular choice for beginners is centered, but this can be hard to do without looking overly formal.

Alignment is a basic principle of design and you should learn how to create it using CSS and also learn what types of alignment are most visually effective.

Related Video
How to Align Text in a CSS document

©2014 About.com. All rights reserved.