我无法集中以下表格:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Pages.css">
<title>Sign Up</title>
</head>
<body>
<form action="Actions/NewUser.jsp">
<fieldset>
<legend>Create A New User</legend>
<label for="usr">Username:</label>
<input type="text" name="usr" >
<br>
<label for="passwd">Password:</label>
<input type="password" name="passwd" >
<br>
<input type="submit" value="Register" >
<br>
<a href="log__in.html">Already Have An Account?</a>
</fieldset>
</form>
</body>
</html>
CSS:
fieldset {
background-color: #F5F6CE;
display: inline;
padding: 2px;
border: double #FF0000;
}
legend {
border: 1px #FF0000;
font-size: 14pt;
padding-left: 1em;
padding-right: 1em;
}
input [type = "submit"] {
color: #FF0000;
}
body {
background-color: #F5F6CE;
}
.center{
margin:0 auto;
display:inline;
}
我运行并刷新,但窗体未居中。我不是HTML开发人员,我只需要为紧急情况做一些工作。有没有办法让整个字段集和表单居中?
最佳答案
body {
background-color: #F5F6CE;
text-align:center;
}
fieldset {
background-color: #F5F6CE;
display: inline;
padding: 2px;
border: double #FF0000;
text-align:left;
}
text-align:body标签中心居中
http://jsfiddle.net/R6V4E/1/
如果要在垂直和水平方向上居中放置表单,请给表单的位置和大小如下所示;
form {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:250px;
height:130px;
}
http://jsfiddle.net/R6V4E/5/