...

View Full Version : How Do You Center A Form Vertically Inside A <Div>



supergrame
03-11-2009, 01:01 AM
#Header {
position:absolute;
left:0px;
top:0px;
width:800px;
height:100px;
border: 1px solid #39F;
text-align: center;
}

<div id="Header">
<form method="get" action="http://www.google.com/search">
<input type="text" name="google" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</form>
</div>



Thats what im working with:thumbsup:

twodayslate
03-11-2009, 01:10 AM
A lot of options... http://www.google.com/search?hl=en&q=vertical+center+css&btnG=Google+Search&aq=0&oq=

My favorite: http://d-graff.de/fricca/center.html

supergrame
03-11-2009, 01:11 AM
Oh and is it possible to create a registration form inside a div and line it all up useing CSS or is tables the only way?

twodayslate
03-11-2009, 01:27 AM
Oh and is it possible to create a registration form inside a div and line it all up useing CSS or is tables the only way?

Tables is the absolute wrong way!
You can use pure CSS.

If the height is going to be constant you can do this by setting the padding so it looks even. :)

supergrame
03-11-2009, 03:08 AM
Thank you very much I was wondering about using tables because creating a div then a form then a table all in one spot looks messy. but every time i change the padding in my div it changes the width and height of the hole div container!

Excavator
03-11-2009, 03:12 AM
Hello supergrame,
This works in all but IE6 -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 802px;
height: 400px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
height: 100px;
line-height: 100px;
border: 1px solid #39F;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<form method="get" action="http://www.google.com/search">
<input type="text" name="google" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</form>
<!--end header--></div>
<!--end wrap--></div>
</body>
</html>

Sorry, had to remove the ap.

This seems to work in IE6 -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 802px;
height: 400px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
height: 100px;
border: 1px solid #39F;
text-align: center;
}
#header form {
margin: 38px 0 0 0;
}</style>
</head>
<body>
<div id="wrap">
<div id="header">
<form method="get" action="http://www.google.com/search">
<input type="text" name="google" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</form>
<!--end header--></div>
<!--end wrap--></div>
</body>
</html>

twodayslate
03-11-2009, 03:54 AM
Padding does add to the width/height. Compensate by decreasing the height/width respectively.

Also, this is how you code should be:


<div>
<form>
<fieldset>
<input />
</fieldset>
</form>
</div>

supergrame
03-13-2009, 09:02 PM
Hey thank you guys very much, great answers.

since you are using div you have to creat a css id for every one to get them all in the positions you want. with that method i have ended up with alot of css rules (or maybe its called actions) allot of these

#layout #content # #picture {
align: center;
}


is that normal or am i missing something to lessen the css code?

thanks again:thumbsup:

supergrame
03-13-2009, 09:26 PM
I found this in one of the forum posts. its how to create and place forms with no tables.

http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

rustang289
03-14-2009, 11:10 AM
use a class inside of your div you really don't want to use absolute positioning


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="3.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="Header"><div class="search">
<form method="get" action="http://www.google.com/search">
<input type="text" name="google" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</form>
</div>
</div>
</body>

</html>


add this to your css
.search{
width:400px;
margin:0 auto;

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum