Jump to content

How do I center a <div>


dhracer
 Share

Recommended Posts

Hi,Try this, Do you need somthing like this,<div align="center">

The align attribute has been depreciated in HTML 4.01 and is not supported in XHTML 1.0 Strict. The other option is to define a style and use margin: 0 auto;.
<html> <head>  <style>    #main {      width:430px;      float:right;      padding:8px 0;      margin:0 auto;    }  </style> </head><body>         <div id=”main”>   ..   ..  </div></body></html>

Link to comment
Share on other sites

the margin auto thing doesn't seem to work for me, I tried that :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><title>Div test</title><style type="text/css">div{    border-bottom-width : 2px;    border-left-width : 2px;    border-right-width : 2px;    border-top-width : 2px;    border-color : black;    border-style : solid;}div.main {    position : relative;    float : right;    width : 600px;    margin : 0 auto;    padding : 0;  }div.right {    float : right;    position : relative;}</style></head><body><div class="main">  this is in one div  <div class="right">    this is in the inner div  </div><div class="right">  this is in the inner inner div</div><div class="right">this is the innermost div</div></div></body></html>

Link to comment
Share on other sites

Another way to center the div is to position it using absolute. You'll need some javascript too. With js find the width and height of the window (or possibly the parent element if this is supposed to be nested). Then divide both of those by two. Now you have the center point. You'll need to subtract half of the div's width and height then and then use js to set the div position to that.axel

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...