[ New messages · Members · Forum rules · Search · RSS ]
  • Page 1 of 1
  • 1
Forum » Web Design » CSS » How to Centre a DIV Block Using CSS
How to Centre a DIV Block Using CSS
BassoDate: Thursday, 2013-02-21, 7:15 PM | Message # 1
Group: Moderator
Messages: 1637
Awards: 2
Reputation: 695
Status: Offline

How to Centre a DIV Block Using CSS

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.

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 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 -- that is, you cannot just set the margins to auto without specifying the width of the block and expect this method to work.

The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.

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 ;
If you have a problem about Intellectual property rights violation,

Please Contact Us we remove all content within 24 hours.

Forum » Web Design » CSS » How to Centre a DIV Block Using CSS
  • Page 1 of 1
  • 1
Forum Advice
Security advice: Protect your identity when downloading!
Your real identity and ip address is visible while downloading. These days, everyone's looking to throttle your connection, spy on what you're downloading, or even send you an ominous letter. If you use BitTorrent, you absolutely need to take precautions to hide your identity. An easy and raliable solution is a VPN by doesn't store any logs and offers blazing fast VPN is trustedby more than 500.000 internet users worldwide and recommended by