Thread: Can't Center a Form (PHP/HTML/CSS)

I can't seem to get the form on this site to center. I have tried wrapping it in <center> tags, using <div align="center">, <div style="text-align:center"> and <p style="text-align=center"> on the data inside of the <form> tags. It just won't center.

I'm not a pro and didn't write this code. Any help is much appreciated.

Here are the CSS pages in case they help at all:

Code:

body {
    background-image: url(images/top.jpg);
    background-repeat: no-repeat;
    background-color: #f8f8f8;
    text-align: center;
    font-family: "Trebuchet MS", Tahoma, Verdana;
    font-size: 12px;
    font-weight: normal;
    color: #6F6F6F;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
}

br {
    clear: both;
}
label {
    float: left;
    width: 90px;
}
input, select {
    font-family: "Trebuchet MS", Tahoma, Verdana;
    font-size: 12px;
    font-weight: normal;
    color: #6F6F6F;
    background-color: #FFFFFF;
    border-top: 1px solid #D4D0C8;
    border-left: 1px solid #D4D0C8;
    border-right: 2px solid #A8A8A8;
    border-bottom: 2px solid #A8A8A8;    
    padding: 2px 3px 2px 3px;
    float: left;
}
.boton {
    font-family: "Trebuchet MS", Tahoma, Verdana;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #A50706;
    border-top: 1px solid #D4D0C8;
    border-left: 1px solid #D4D0C8;
    border-right: 2px solid #A8A8A8;
    border-bottom: 2px solid #A8A8A8;
    text-decoration: none;
    padding-right: 10px;
    padding-left: 10px;
    cursor: pointer;
}
.copy {
    font-size: 12px;
    font-weight: normal;
    color: #6F6F6F;
    text-decoration: none;
    padding: 5px 16px 5px 16px;
    border-top: 1px solid #A8A8A8;
}
.adsense {
    background-color: #F2F2F2;
    border: 1px dashed #D4D0C8;
    font-size: 12px;
    text-decoration: none;
    margin: 0 auto 0 auto;
    text-align: left;
    padding: 5px;
    width: 468px;
}
.borde {
background-image: url(images/mbg.jpg);
background-repeat: repeat;
    width: 800px;
    border: 1px dashed #D4D0C8;
    font-size: 12px;
    text-decoration: none;
    margin: 16px auto 0 auto;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 30px;
}

#main {
    width: 600px;
    height: 40px;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-top: -200px;
    margin-left: -300px;
    text-align: center;
}
.link {
    color: #CC0000;
    text-decoration: none;
}
a.link:hover {
    color: #CC0000;
    text-decoration: none;
}
.subtit {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #CC0000;
}

Code:

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}        

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

UPDATE: The problem was solved by adding this to the stylesheet:

Code:

form {
width:450px;
}

Then, the form was wrapped in <center> tags.

I still wonder if there is a less quick and dirty way to do this since the <center> tag isn't supposed to be used with PHP.

"margin:0 auto;" does the trick

<center> and <div align="center"> are deprecated methods for centering content (or containers) the best valid way is CSS

Parent tag should have the property "text-align:center;"
and the container tag should have a specified width and an "auto" margin for sides

Example:

Code:

/* body tag is the parent tag */

body {
  text-align:center;
}

/* div #wrapper is inside body */

#wrapper {
  width:960px;
  text-align:left;
  margin:20px auto;
}

hopefully this was helpful

Yeah good stuff Aziz.

You usually need to use both margin:0 auto [Firefox] and text-align:center [IE] for cross browser centering, and it helps to set a width.

Originally Posted by Aziz

<center> and <div align="center"> are deprecated methods for centering content (or containers)

That was my concern.

Originally Posted by Mike-XS

You usually need to use both margin:0 auto [Firefox] and text-align:center [IE] for cross browser centering, and it helps to set a width.

It centers well in Firefox with some code I got from somewhere else. It doesn't center well in IE. I'll have to take an extra look and try what you mentioned.

UPDATE: I added margin:0 auto and text-align:center and it floated the entire form over to the right side of the page. Going back to the old code now:

Code:

form {
position:relative;
left:170;
width:450;
}