BHS DESIGN - Horizontal Centering

Page Info

Page Title: Horizontal Centering
Description: How to use CSS to center a div, a table or some text?
Author: Dumb Genius
Submission Date: 28-05-2005 19:02

Rating & Comments

View or add comments:

(0)
Average members rating:

To center an element horizontally, use the following CSS code:

Code :
// hide source code
// hide line numbers



1  #center {
2       margin-left: auto;
3       margin-right: auto;
4       width: 100%;
5

The width can be changed to anything but it is required and can not be removed to work correctly.
This code has to be used with the associated HTML code:

Code :
// hide source code
// hide line numbers



1  <div id="center"></div>

Notice that it won't center any text, if you use it for this purpose. Instead use

Code :
// hide source code
// hide line numbers



1  #centertext {
2       text-align: center;
3

and

Code :
// hide source code
// hide line numbers



1  <div id="centertext"></div>

The screenshot from W3C describes how each box, having a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas must be handled. Assigning the 'auto' property to the margin will force the content box to be centered since both the right and the left margin will have an equal value. You now understand why this technique is not working if you dont specify a width for the content itself.

Donation:

If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months.