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