The CSS way to align things
Published on October 18th 2007.
Modified on July 28th 2010.
There are two ways to align things in CSS and these depend on what we want to align: text or an actual element.
Aligning text
To align text, we must first make sure it isn't inside an inline element. Inline elements cannot be aligned on a page, nor have their content aligned, as they "shrink-wrap" to fit their content, whereas block elements do not behave in the same way.
If you need to, you can convert an inline element into a block element, by giving it a display:block, as I've done below in How to align a block element on a page.
Example of aligning text
CSS Code:
p.centreEx {
text-align:center; /* Aligns text to the centre */
background-color:#6CF;
padding:6px;
}
p.leftEx {
text-align:left; /* Aligns text to the left */
background-color:#9FC;
padding:6px;
}
p.justifyEx {
text-align:justify; /* Gives text a justified alignment */
background-color:#C9F;
padding:6px;
}
p.rightEx {
text-align:right; /* Aligns text to the right */
background-color:#C99;
padding:6px;
}
(X)HTML Code:
<p class="centreEx">This paragraph is centre aligned.</p>
<p class="leftEx">This paragraph is centre aligned.</p>
<p class="justifyEx">The alignment of this paragraph is justified.</p>
<p class="rightEx">This paragraph is right aligned.</p>
Result:
This paragraph is centre aligned.
This paragraph is left aligned.
The alignment of this paragraph is justified.
This paragraph is right aligned.
How to align a block element on a page
Centre Align
To centre align a block element, we create equal margins on either side of it, by assigning auto to its left and right margins. Make sure also that you give it a width — otherwise it will expand horizontally to fill the screen or whatever container it is in — and remove any floats that may have been applied to the element. A float:left or float:right will cause the style declaration to break.
CSS Code:
div.centreAlignEx {
margin:0 auto;
width:400px;
height:20px;
padding:6px;
background-color:#9CC;
}
(X)HTML Code:
<div class="centreAlignEx">
This division is centre aligned.
</div>
Result:
If your element isn't a block element, you must convert it by setting the CSS display property to block, as such:
CSS Code:
p.centreAlignEx {
display:block;
margin:0 auto; /* Now we centre align */
width:400px;
height:20px;
padding:6px;
background-color:#9CC;
}
(X)HTML Code:
<p class="centreAlignEx">
This paragraph is centre aligned.
</div>
Result:
This paragraph element is centre aligned.
Left Align
To left align an element on a page we give it a float:left, which floats it to the left of any elements that are beside it.
CSS Code:
div.floatLeftEx {
float:left;
padding:6px;
background-color:#969;
margin:0 10px 10px 0;
}
(X)HTML Code:
<div class="floatLeftEx">This division is floated to the left of our sample text.</div>
<p><em>Some completely random and boring sample text.</em></p>
Result:
Some completely random and boring sample text.
Note — I applied a margin:0 10px 10px 0 to the left floated element purely to create some space between it and the sample text.
Right Align
To right align an element on a page we give it a float:right, which floats it to the right of any elements that are beside it.
CSS Code:
div.floatRightEx {
float:right;
padding:6px;
background-color:#CFC;
margin:0 0 10px 10px
}
(X)HTML Code:
<div class="floatRightEx">This division is floated to the right of our sample text.</div>
<p><em>Some completely random and boring sample text.</em></p>
Result:
Some completely random and boring sample text.
Note — I applied a margin:0 0 10px 10px to the right floated element purely to create some space between it and the sample text.
Clearing floats
Above, I applied a clear:left to the paragraph underneath the left float example and a clear:right to the paragraph underneath the right float example, to clear the floats. If I hadn't, both floats would have leaked out. The paragraph underneath the left float example would have been floated next to the sample text, and the paragraph underneath the right float example would have been floated next to the element with the float on. If you don't clear a float in someway, it will leak out and affect other elements on the page, with often undesirable results.
For more on the CSS clear property, see How to eliminate unnecessary tags by using CSS clear property. For more on float leakage, see How to combat float leakage.
