I have a form within the body. And I'm trying to replace the form at the middle/center of the screen. Is there a proper way to do that in CSS?
-----------------------
- -
- -
- -
- M -
- -
- -
- -
-----------------------
Declare a width property for your form and use auto left margin, say:
form{
width: 50%;
margin: 0 auto;
}
Edit: (snipped previous code, it only horizontally aligned)
Since no one else got back about vertical align... Here's one option. If the form is just sitting in the body, you don't want a wrapper, etc.. Basic solution (requires a fixed height):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Vertical/Horizontal Align</title>
<style type="text/css">
form {
height:400px;
width:400px;
position: absolute;
left: 50%;
top: 50%;
background-color:#CCC;
/* Set margins to offset 50% of the w/h */
margin: -200px 0 0 -200px;
}
</style>
</head>
<body>
<form action="/something">
<p>
<label>NAME: </label> <input type="text" name="Name" />
</p>
<p>
<label>PHONE: </label> <input type="text" name="Phone" />
</p>
</form>
</body>
</html>
Background color is just to illustrate the width/height..