我希望我的登录表单与 Facebook 的一样，但它的渲染太低了，几乎脱离了标题。我希望它像 Facebook 一样位于中间。
<!DOCTYPE html>
<html lang="en" id="morethan"><head>
<link rel="stylesheet" href="stylesheet/5uV6fe9qPff.css" type="text/css">
</head>
<body class="home">
<div id="wrapper">
<div class="loggedout_menubar_container">
<div class="cleaarrfix loggedout_menubar">
<a class="lfloat" href="/" title="Go to Morefun Home"><i class="morefun_logo img sp_6jxgq1 sx_df432d"><u>Morefun logo</u></i></a>
<div class="menu_login_container rfloat">
<form id="" action="" method="post" onsubmit="">
<input type="hidden" name="lsd" value="AVrMo5Pe" autocomplete="off">
<table cellspacing="0">
<tbody>
<tr>
<td class="html7magic"><label for="email">Email or Phone</label></td>
<td class="html7magic"><label for="pass">Password</label></td>
</tr>
<tr>
<td>
<input type="text" class="inputtext" name="email" id="email" value="" tabindex="1" placeholder="Email or Phone"></td>
<td><input type="password" class="inputtext" name="pass" id="pass" tabindex="2" placeholder="Password"></td>
<td><label class="uiButton uiButtonConfirm" id="loginbutton" for="u_0_4"><input value="Log in" tabindex="4" type="submit" id="u_0_4"></label></td>
</tr>
<tr>
<td class="login_form_label_field">
<div>
<div class="uiInputLabel clearfix">
<input id="persist_box" type="checkbox" name="persistent" value="1" tabindex="3" class="uiInputLabelCheckbox">
<label for="persist_box">Keep me logged in</label>
</div>
<input type="hidden" name="default_persistent" value="0">
</div>
</td>
</tr>
</tbody>
</table>
<input type="hidden" autocomplete="off" name="timezone" value="0" id="u_0_3">
<input type="hidden" name="lgnrnd" value="110619_A5vh">
<input type="hidden" id="lgnjs" name="lgnjs" value="1364148375"><input type="hidden" autocomplete="off" id="locale" name="locale" value="en_GB">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
这是CSS代码
body {
background: url("http://www.sayhellothere.com/images/bg-wrapper.jpg");
color: #c4d6e4;
line-height: 1;
margin: 0;
padding: 0;
text-align: left;
direction: ltr;
unicode-bidi: embed;
}
.loggedout_menubar_container {
background-color: rgba(0,0,0,0.1);
border: 1px solid #556166;
-webkit-box-shadow: 0,0,2px,0,#000;
box-shadow: 0,0,2px,0,#000;
background: url("http://www.sayhellothere.com/images/bg-home.jpg") repeat-x;
height: 82px;
min-width: 980px;
}
.loggedout_menubar {
margin: 0 auto;
padding-top: 13px;
width: 980px;
}
.lfloat {
float: left;
}
a {
color: #3b5998;
cursor: pointer;
text-decoration: none;
}
.loggedout_menubar .morefub_logo {
margin-top: 17px;
}
.sx_df432d {
width: 170px;
height: 36px;
background-position: 0 0;
}
.sp_6jxgq1 {
background-image:url('images/logo.png');
background-size: auto;
background-repeat: no-repeat;
display: inline-block;
height: 9px;
width: 9px;
}
i.img u {
position: absolute;
top: -9999999px;
}
.rfloat {
float: right;
}
form {
margin: 0;
padding: 0;
}
table {
word-wrap: normal;
}
.menu_login_container table tr td {
padding: 0 0 0 14px;
}
td, td.label {
text-align: left;
}
.menu_login_container .html7magic label {
color: #9fafb8;
font-size: 14px;
display: block;
margin: 0 0 6px;
font-weight: bold;
text-shadow: 0px -1px #000;
padding-left: 1px;
}
.menu_login_container .inputtext, .menu_login_container .inputpassword {
width: 138px;
padding: 7px 5px;
background: url("http://www.sayhellothere.com/images/bg-login.png") no-repeat 0 -95px;
overflow: hidden;
margin: 0;
}
.inputtext, .inputpassword {
float: left;
margin: 0;
padding: 0;
width: 138px;
border: 0;
background: none;
color: #fff;
font-size: 14px;
line-height: 17px;
outline: none!important;
}
.uiButtonText, .uiButton input {
float:right;
padding:1px 0 2px;
margin:0;
width:71px;
height:30px;
cursor: pointer;
font-size: 14px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #eaeaea;
background-image: -webkit-linear-gradient(top,#eaeaea,#a8a8a8);
display: inline-block;
font-family: helvetica,arial,sans-serif;
font-weight: bold;
color: #515151;
border: 1px solid #333;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.uiInputLabel label {
display: inline;
font-size: 12px;
font-weight: normal;
vertical-align: -1px;
color: #9fafb8;
margin: 0 0 6px;
text-shadow: 0px -1px #000;
}