duta
asked on
CSS: How to place a form in the center of screen?
Dear experts:
I have a simple form.
I would like to learn to use CSS to place the form in the center of the screen.
Thanks a lot!
I have a simple form.
I would like to learn to use CSS to place the form in the center of the screen.
Thanks a lot!
<body>
<h1> Registration Form </h1>
<form name="demo" onsubmit="return validateFormOnSubmit(this)" ]method = "GET"
action="http://young.scottswebservices.com">
<table summary="Demonstration form">
<tbody>
<tr>
<td><label for="Name"> Name:</label></td>
<td><input name="name" size="35" maxlength="50" type="text" id = "name"></td>
</tr>
<tr>
<td><label for="phone"> Phone:</label></td>
<td><input name="phone" size="35" maxlength="25" type="text" id = "phone"></td>
</tr>
<tr>
<td><label for="email"> Email:</label></td>
<td><input name="email" size="35" maxlength="30" type="text" id = "email"></td>
</tr>
<tr>
<td><label for="description"> Description </label></td>
<td><input name="description" size="35" maxlength="25" type="text" id = "description"></td>
</tr>
<tr>
<td>
<label for="subscribe"> Subscribe </label></td>
<td><input name="subscribe" size="35" maxlength="50" type="checkbox"></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" value="Send" type="submit" ></td>
<td> </td>
</tr>
</tbody>
</table>
</form>
</body>
Last Comment
ASKER
Thank you so much for your kind prompt tip.
By the way, I tried your tip as the follows. But it did not work.
I guess I did not follow your instruction fully.
Thanks!
By the way, I tried your tip as the follows. But it did not work.
I guess I did not follow your instruction fully.
Thanks!
<style type="text/css" media="all">@import "form.css";</style>
____________form.css ___________
#center
{margin-left:auto; margin-right:auto;}
__________________________________________
___________________index.html _____________________________
<html>
<head>
<title></title>
<script type="text/javascript" src="/myjava.js"></script>
<style type="text/css" media="all">@import "form.css";</style>
</head>
<body>
<h1> Registration Form </h1>
<div id="center">
<form name="demo" onsubmit="return validateFormOnSubmit(this)" ]method = "GET"
action="http://young.scottswebservices.com">
<table summary="Demonstration form">
<tbody>
<tr>
<td><label for="Name"> Name:</label></td>
<td><input name="name" size="35" maxlength="50" type="text" id = "name"></td>
</tr>
<tr>
<td><label for="phone"> Phone:</label></td>
<td><input name="phone" size="35" maxlength="25" type="text" id = "phone"></td>
</tr>
<tr>
<td><label for="email"> Email:</label></td>
<td><input name="email" size="35" maxlength="30" type="text" id = "email"></td>
</tr>
<tr>
<td><label for="description"> Description </label></td>
<td><input name="description" size="35" maxlength="25" type="text" id = "description"></td>
</tr>
<tr>
<td>
<label for="subscribe"> Subscribe </label></td>
<td><input name="subscribe" size="35" maxlength="50" type="checkbox"></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" value="Send" type="submit" ></td>
<td> </td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
You can always try giving the form a width in the CSS and using the margin auto on it, something like:
form {
width: 300px;
margin: 0 auto;
}
Hey, have a look here. There are a loots of CSS-based forms:
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
ASKER
form {
width: 300px;
margin: 0 auto;
}
The above code did not work for some reason,
Do I need to give any script in the form in the .html file?
Thanks!
width: 300px;
margin: 0 auto;
}
The above code did not work for some reason,
Do I need to give any script in the form in the .html file?
Thanks!
Might not be working for a couple of reasons, your page doctype is missing. This tells the browser how to interpret markup and css.
Doctype example:
<!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">
Another possibility is your use of tables. I will have a look when back in office tomorrow and recreate your form in divs.
Doctype example:
<!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">
Another possibility is your use of tables. I will have a look when back in office tomorrow and recreate your form in divs.
ASKER
Thanks a lot!
I think if you use Lotok's solution, your div needs a defined width.
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Still the form is not displayed in the center.
Thanks!
Thanks!
It displays in the center for me. Using IE7.
What browser do you have?
What browser do you have?
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thank you so much for patiently and kindly helping me out!
CSS
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.
43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
margin-left:auto; margin-right:auto;