我无法集中以下表格:

<!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/

07-28 02:26
查看更多