I am trying center (to middle of the page) a html form using css.
I already read other member's somewhat similar questions. But, I cannot figure this out
This is the HTML form:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/form_style.css">
<title>My Form</title>
</head>
<body>
<form action="#">
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" /><br />
<label for="email">Your Email:</label>
<input type="text" name="email" id="email" /><br />
<input type="checkbox" name="subscribe" id="subscribe" />
<label for="subscribe" class="check">Subscribe</label>
</form>
</div>
</body>
</html>
and this is the CSS:
<style>
form{
width: 700px ;
margin-left: 0 auto;
}
label {
text-align:right;
width:100px;
}
input {
margin-left: 10px;
}
label.check, label.radio {
text-align:left;
}
</style>
I tried quite some time. But still I could not center the form. Any guidence? Thanks
The shorthand property is margin
, not margin-left
. Fix it, and it'll be centered:
form {
width: 700px ;
margin: 0 auto;
}
Here's the fiddle: http://jsfiddle.net/Tzr7D/