So I have a problem with that the "submit" box doesent show right under the "Password-input". So I wondered if you could help me. Thanks for any answers. Im not a professional programmer so keep that in mind.
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<input type="submit" id="Submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Okey its very simple
<label> </label>
<input type="submit" id="Submit" value="Submit">
make an empty label for submit button
Just add 'br' tag which is nothing but new line. Here is the code
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<br>
<br>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<br>
<br>
<input type="submit" id="Submit" value="Submit">
<br>
<br>
</fieldset>
</form>
</body>
</html>
hope this helps for u!!
Related
I have created a form that is aligned horizontally with the labels on top.
I had some difficulty aligning the = button, and I used a trick with   to align it. I couldn't find any better solution for this, is there something better to do?
I want to apply a border around the form and align it in the center of the page.
I have tried several things, like placing it inside a table, or using another div but with no success.
This is my code until now (I have not included the script for the calculations):
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</div>
</form>
</body>
</html>
You can create a wrapper DIV around it and make that a flex container, using the following settings to achieve the centering both horizontally and vertically:
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form {
padding: 10px;
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</div>
</body>
</html>
What you might do is give the form a width and use margin: 0 auto to align it in the middle and set overflow: auto;
For example:
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right:20px;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div>
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div>
<label for="O">Operator</label>
<select name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div>
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div>
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div>
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</body>
</html>
I have a simple login/signup page that im making. Both the login and signup parts of the site have issues in that the text mentioning what to write in the textboxes are not aligned with one another. I have tried to change the margins back and forth and no matter how I change it I still have the same problem.
As you can see the Password in the login parn and the City and Email part dont stick to the left as it should. Is there any good way of solving this issue? And also is there any "clean" way of pairing the text with the textbox so that they always align? Below you will find the code I use for this part of the site.
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
As usual, what is a pain to do with classic CSS (float, clear etc) is a breeze with Flexbox :
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: #7fffd4;
padding: 5px;
}
#Sign_Up {
text-align: center;
background-color: #a52a2a;
margin-top: 10px;
padding: 5px;
}
form div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
border: #00f dashed 1px;
margin-bottom: 2px;
}
form div input {
width: 120px;
}
form div select {
width: 124px;
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<br><input type="submit" value="Submit">
</form>
</div>
</div>
You can us tabular forms, they are easy to manage.
form{
background-color:red
}
H1{
text-align:center
}
<!DOCTYPE html>
<html>
<body>
<H1>Hello</H1>
<form>
<table style="width:100%">
<tr>
<td>Email</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="firstname"></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
clear: left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
Addition: I made the form containers 20px wider and therefore the left container 20px narrower to avoid the problem described for Chrome in the comments.
Let's do some cleanup and simplification here.
First off we'll get rid of all those <br> tags. Don't need 'em.
Next we're going to stop with the floats. Float is great for what it's intended for, which is letting text wrap around a floated element. Float is not so great for what it's often used for, which is as a bad replacement for inline-block -- bad because you have to set explicit heights, worry about clears, etc.
#Login_and_Sign_Up {
width: 250px;
margin-left: 10px;
}
#Login {
background-color: aquamarine;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
}
label {
width: 80px; /* adjust to taste */
display:inline-block
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="#">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<input type="submit" value="Submit">
</form>
</div>
</div>
Further improvements that could be made:
For accessibility you should be associating your <label>s with their form elements. Do this either by using the for attribute on the label, or by nesting the form fields inside the label.
Using the label as the wrapper would have the additional advantage of allowing you to omit the wrapper <div>s, by setting label to display:block.
Use CSS Flexbox
I have done it for the login form, you can repeat the same for sign-up as well.
Please wrap your 'label and input select in <p> tags. This will help you eliminate <br/> tags.
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 170px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
.flex-form p{
display:flex;
}
input {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
select {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
label {
flex: 1;
margin: 5px 0 0 0;
float:left;
text-align:left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php" class="flex-form">
<p>
<label>Email</label>
<input type="text" name="email">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
My example looks at utilizing bootstrap .form-group and adding a min-width to the label. Though in hindsight, after reading the flexbox answer - that one is probably easiest for you. I've spent a little time working on this answer so I'll post it anyway.
I also stipped out a lot of unnecessary tags and assigned labels to their elements. There was a lot of br and div which didn't need to be there using this method.
#Login_and_Sign_Up {
height: inherit;
margin-left: 10px;
/* float: right; */
}
#Login {
background-color: aquamarine;
overflow: hidden;
width: 300px;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
width: 300px;
overflow: hidden;
}
label {
min-width: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="firstname">First name</label>
<input type="text" name="fname" id="firstname">
</div>
<div class="form-group">
<label for="familyname">Family name</label>
<input type="text" name="lname" id="familyname">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" name="city" id="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" name="country" id="country">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="repeat">Repeat PSW</label>
<input type="password" name="passwordrepeat" id="repeat">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
I'm trying to make a form but when I try to centralise it, it just stay tight to the left side of #wrapper. It reacts to margin-top but not anything to do with going across. I've tried putting a value on margin, using margin-left and still nothing. I'm pretty sure I've followed the YouTube tutorial I'm working with character for character so not sure where I've gone wrong, does anybody have any ideas?
body {
padding: 0;
margin: 0;
background-color: #ccc;
}
#wrapper {
width: 1000px;
background-color: #FFF;
margin: 0px auto;
min-height: 400px;
margin-top: 40px;
border: 1px solid #999;
border-bottom: 3px solid #999;
border-radius: 5px;
}
#formDiv {
width: 200px;
margin: 0px auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv"></div>
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>
You closed your formdiv tag to early. Use this:
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv">
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</div>
</body>
</html>
If you need to center it, you also need to center form element
#wrapper form{
width: 180px;
margin: 0 auto;
}
http://jsfiddle.net/47ku1qud/
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
I have tryed everything to get my input forms to the center of the page.
This is what my code kinda looks like:
<!DOCTYPE html>
<html>
<head>
<title>Pizza Order</title>
<style>
.container {
width: 500px;
clear: both;
margin-right:50%;
}
input {
width: 100%;
clear: both;
}
.what {
font-size:35px;
}
</style>
<body>
<div class="container">
<form>
<p>Name<input type="text" name="name"></p>
<p>Last Name<input type="text" name="lastname"></p>
<br>
<p class="what">Pick your crust:</p>
<input type="checkbox">Thick
<input type="checkbox">Thin
<input type="checkbox">Cheesy
</form>
</div>
</body>
</html>
Any ideas?
(wouldnt let me post until i had more details so: DFKJSDFKLJD:FLKJDFLJDFKJDSFLKDSJF:DLSKFJ;laksjflkdjdetailsdetailsdetailsDETAILS)
You weren't clear on what you were actually trying to "center". This puts your form in the middle of the page as well as aligns your input fields.
<!DOCTYPE html>
<html>
<head>
<title>Pizza Order</title>
<style>
#container {
width: 100%;
clear: both;
}
#content {
margin: auto;
position:relative;
width:500px;
}
.what {
font-size:35px;
}
label {
width: 150px;
float: left;
}
</style>
<body>
<div id="container">
<div id="content">
<form>
<label for="name">Name</label><input type="text" id="name" name="name"><br />
<label for="lastname">Last Name</label><input type="text" id="lastname" name="lastname">
<br>
<p class="what">Pick your crust:</p>
<input type="checkbox">Thick
<input type="checkbox">Thin
<input type="checkbox">Cheesy
</form>
</div>
</div>
</body>
</html>