How to Center a DIV Block Using CSS

Standard Trick to Centering a Block of Text/Images Using Cascading Style Sheets


How to Centre a DIV Block Using CSS

by Christopher Heng, thesitewizard.com

This article shows you how to centre (or "center" in US English) a DIV block, whether it contains text, graphics, or a mixture of both, using standards-compliant Cascading Style Sheets (CSS). The technique is useful not just for creating pleasing designs, but also for times when you want to create a fixed width single column layout with the main content placed in the centre of the page, and not flushed to one side.

Assumptions

I will assume in this article that you have some basic knowledge of how to write HTML and CSS.

If you don't even have a website yet, and have arrived at this article looking for tips on designing one, please start with my article on How to Start/Create Your Own Website instead.

Steps to Centering a DIV Block without Centering the Text Inside

Let's assume that you have a div block as follows:

<div id="content">
This is a DIV block that is to be centred. I don't want the text to be centred, though, just the block.
</div>

At first glance, you may think that the following CSS rule will work.

text-align: center ;

However, the rule centres the text inside the box, rather than the block itself. While there are times when you may want to do this, our intention here is to centre the entire block but leave the internal contents formatted as it was before. As such, the above code is not what we want.

Instead, the standard trick to centring ("centering") a block in CSS is to do the following:

  1. Specify a width for the DIV block.
  2. Set both its left and right margins to auto.

Both steps are necessary. You cannot just set the margins to auto without specifying the width of the block and expect this method to work.

For example, if you want your div block to have a width of 700 pixels, the following code will centre the block.

#content {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width. This is why you also have to specify the width of the DIV block, since browsers will otherwise set it to 100% of the available space. If all the space is occupied by the block, there's no need to centre it. Centring is only relevant if an object is smaller than the space around it.

Incidentally, the width doesn't need to be in pixels. Other units like em or percentage will work just as well.

Demo

At the time this article was written, you can see an example of this code in action on the Feedback Form Wizard Demo Site. The main body of that site has a width of 730 pixels, and is centred using the method given here, so that it appears in the middle of the browser window.

(Note: if your browser window is opened too small, or your monitor has too low a resolution, you will of course not be able to see the effect.)

Browser Support

The code above has been tested with IE 6, 7, Firefox, Opera and Safari. It should work in all later versions of IE as well, since the newer ones tend to be standards-compliant.

Note that this article only deals with the centring of a DIV block using CSS. If you want to centre a table, you will have to work around bugs in IE 6 and 7. In such a case, please see my article How to Centre a Table Using CSS in Nvu and KompoZer instead. Although that article is directed at Nvu and KompoZer users, the code itself is given in CSS and HTML so you should have no trouble following what is said.

Conclusion

The method above is the standard technique for centring a DIV block using standards-compliant CSS. With this, you can centre your blocks without using deprecated HTML tags like <center>. And the code even works in buggy browsers like IE 6 and 7.

This article can be found at http://www.thesitewizard.com/css/center-div-block.shtml

Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Centre a DIV Block Using CSS





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.