Home | How to

Center a DIV block

One of the first things a new developer wants to know how to do when hand coding their HTML using cascading style sheets is how to center the page. In actuality you are centering a block and the block will be a DIV tag. Here is how:

Set text-align: center for the <body>. This code will center all page content.
Place your page text in a <div> that will be the main section for all your page content
Set the following styles for the main <div>
- width: 760px - set the size as appropriate for your page
- margin-left: auto; - <div> wants to be centered, so let the browser do it automatically
- maring-right: auto; - <div> wants to be centered, so let the browser do it automatically
- text-align: left; - now set the text to be left aligned within the main <div> block

<body style='text-align: center'>
  <div style='width: 760px; margin: auto; text-align: left'>
    This is aligned left in a centered box.
  </div>
</body>

See other HTML tips

And that is how to center a web page.

Share this:

Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:


			      <a href='http://upwithabang.com/articles/css-centering.html'>

			Centering using CSS

			</a>