| ( | | | | |
| | | | The technique works because when both margins |
| This article discusses how to centre (or | | | | are set to auto, web browsers are required by |
| "center" in US English) a DIV block, whether | | | | the CSS standard to give them equal width. |
| it contains text, graphics, or a mixture of | | | | |
| both, using standards-compliant Cascading | | | | For example, if you want your div block to |
| Style Sheets (CSS). The technique is useful | | | | have a width of 700 pixels, the following |
| not just for creating pleasing designs, but | | | | code will centre the block. |
| also for times when you want to create a | | | | |
| fixed width single column layout with the | | | | #content {width: 700px ;margin-left: auto |
| main content placed in the centre of the | | | | ;margin-right: auto ; |
| page, and not flushed to one side. | | | | |
| | | | } |
| Assumptions | | | | |
| | | | Incidentally, the width doesn't need to be in |
| I will assume in this article that you have | | | | pixels. Other units like em or percentage |
| some basic knowledge of how to write HTML and | | | | will work just as well. |
| CSS. | | | | |
| | | | Demo |
| If you don't even have a website yet, and | | | | |
| have arrived at this article looking for tips | | | | At the time this article was written, you can |
| on designing one, please start with my | | | | see an example of this code in action on the |
| article on How to Start/Create Your Own | | | | Feedback Form Wizard Demo Site. The main body |
| Website instead. | | | | of that site has a width of 730 pixels, and |
| | | | is centred using the method given here, so |
| Steps to Centering a DIV Block without | | | | that it appears in the middle of the browser |
| Centering the Text Inside | | | | window. |
| | | | |
| Let's assume that you have a div block as | | | | (Note: if your browser window is opened too |
| follows: | | | | small, or your monitor has too low a |
| | | | resolution, you will of course not be able to |
| This is a DIV block that is to be centred. I | | | | see the effect.) |
| don'twant the text to be centred, though, | | | | |
| just the block. | | | | Browser Support |
| | | | |
| At first glance, you may think that the | | | | The code above has been tested with IE 6, 7, |
| following CSS rule will work.text-align: | | | | Firefox, Opera and Safari. |
| center ; | | | | |
| | | | Note that this article only deals with the |
| However, the rule centres the text inside the | | | | centering of a DIV block using CSS. If you |
| box, rather than the block itself. While | | | | want to center a table, you will have to work |
| there are times when you may want to do this, | | | | around bugs in IE 6 and 7. In such a case, |
| our intention here is to centre the entire | | | | please see my article How to Centre a Table |
| block but leave the internal contents | | | | Using CSS in Nvu and KompoZer instead. |
| formatted as it was before. As such, the | | | | Although that article is directed at Nvu and |
| above code is not what we want. | | | | KompoZer users, the code itself is given in |
| | | | CSS and HTML so you should have no trouble |
| Instead, the standard trick to centering a | | | | following. |
| block in CSS is to do the following: | | | | |
| | | | Conclusion |
| Specify a width for the DIV block. | | | | |
| | | | The method above is the standard technique |
| Set both its left and right margins to auto. | | | | for centering a DIV block using |
| | | | standards-compliant CSS. With this, you can |
| Both steps are necessary -- that is, you | | | | centre your blocks without using deprecated |
| cannot just set the margins to auto without | | | | HTML tags like . And the code even works in |
| specifying the width of the block and expect | | | | buggy browsers like IE.by Christopher Heng. |
| this method to work. | | | | |