I am struggling to vertically align my form on my website. Can someone assist me with this issue?
I want my form to be vertically aligned in the same way as my text on the website. How can I achieve this?
Here is the code snippet I am currently using: http://pastebin.com/FuCNwM6e
<head>
<!DOCTYPE html>
<html>
<head>
<title>2 Column CSS Layout</title>
<style type="text/css">
body {
margin:20px;
font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
background-color:#555
}
div {
text-align:center
}
#page {
background-color:#fff;
margin:0 auto;
text-align:left;
width:755px;
padding:0 10px
}
#header {
border-bottom:0px solid #000;
height:30px;
line-height:30px
}
/* Begin Navigation Bar Styling */
#nav {
text-align:center;
line-height: 30px;
}
#nav ul {
text-align:center;
font-size:11px;
width:100%;
margin:0;
padding:0;
display:inline-block;
list-style:none;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc
}
#nav li {
margin:auto;
display:inline-block
}
#nav li a {
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:700;
color:#069;
border-right:1px solid #ccc
}
#nav li a:hover {
color:#c00;
background-color:#fff
}
/* End navigation bar styling. */
#content {
height: 200px;
width:100%;
display: table;
background:none repeat scroll 0 0 none;
}
#content p {
display: table-cell;
vertical-align: middle;
}
#footer {
height:30px;
line-height:30px;
border-top: 1px solid #000;
font-size:9pt
}
#footer p {
float: right;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div style="float: left;">
Please Login
</div>
</div>
<div id="content">
<p>
<form action="" method="post">
<label for="un">Username</label>
<input type="text" id="un" placeholder="username" /><br/>
<label for="pw">Password</label>
<input type="password" id="pw" placeholder="password" /><br/>
<input type="submit" value="Login"/>
</form>
</p>
</div>
<div id="footer">
<div style="float: right;"> copyright 2014 </div>
</div>
</div>
</body>
</html>