怎么把这个位置改成下面这个样式的啊 CSS里怎么改成下面这个样子啊，给它对齐
代码如下：
HTML：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传智商城–登录</title>
<link rel="stylesheet" href="../public/home/user.css">
<script src="../public/common/jquery.min.js"></script>
<script src="../public/common/ajaxForm.js"></script>
</head>
<body>
<div class="box">
<h1>舒心家居馆 | 欢迎登录</h1>
<div class="main">
<div class="login-ad left">
<!-- 广告位 -->
</div>
<form id="loginForm" action="/?c=user&a=loginExec" method="post">
<table class="login right">
<tr><th>用户名:</th><td><input type="text" name="username" required/></td></tr>
<tr><th>密码:</th><td><input type="password" name="password" required /></td></tr>
<tr><td> </td></tr><td><input type="submit" class="button" value="登 录"/></td></tr>
<tr><td colspan="2" class="center"><a href="/?c=user&a=register">立即注册</a><a href="/">返回首页</a></td></tr>
</table>
</form>
</div>
</div>
<script>
// 验证码点击刷新
$(function(){
var $img = $("#captcha");
var src = $img.attr("src")+"&_=";
img.click(function(){
$img.attr("src",src+Math.random());
});
});
// Ajax表单提交
$("#loginForm").ajaxForm(function(data){
// 登录失败，刷新验证码
data.ok || $("#captcha").click();
})
</script>
</body>
</html>
**CSS**如下：
```css
body{margin:0;padding:0;}
body{
/* background:#f2f2f2; */
background-image: url(./images/bg.jpg);
color:#666;
font-size:16px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
h1{font-size:30px;
text-shadow:1px 1px 1px #ccc;
color:rgb(15, 30, 71)
}
.clear{clear:both;}
.center{
text-align:center;
}
.left{float:left;}
.right{float:right;}
.box{width:800px;margin:0 auto;margin-top:30px;}
.box .main{
margin:30px auto;
box-shadow: 0 0 15px #ccc;
background:rgba(255, 255, 255, 0.562);
padding:40px;
overflow:hidden;}
.box .main .login-ad{
width:320px;
height:250px;
background:url(./images/ad02.jpg);
background-repeat: no-repeat;
/* background-size: 100% 100%; */
/* background-attachment: fixed; */
}
/* .box .main .register-ad{width:320px;height:250px;background:url(./images/ad02.jpg);} */
.box .main .login{width:350px;}
.box .main th{text-align:right;}
.box .main input{
width:250px;
height:18px;
padding:5px;
border:1px solid #ddd;
/* */
}
.box .main tr{
height:40px;
}
.box .main th{
font-weight:normal;
}
.box .main img{cursor:pointer;}
.box .main a{color:#EE4C4F;font-size:14px;text-decoration: none;margin-left:20px;}
.box .main a:hover{text-decoration:underline;}
.box .main .button{
width:250px;
height:30px;
background:#EE4C4F;
border:1px solid #E37A7D;
color:#fff;
cursor:pointer;
/* */
}
.box .main .button{*border:none;}
.box .main .button:hover{background:#F4595C;}
.box .main .error{border:1px solid #E37A7D;}
/*提示*/
.tip{position:fixed;top:50%;left:50%;background:#FE8502;color:#fff;;border-radius:6px;font-size:13px;box-shadow:3px 3px 15px #FE8502;z-index:1000;}
.tip-wrap{margin:10px 30px;}
图片：
