Question

我无法集中以下表格：

<!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开发人员，我只是为了紧急情况而做一些工作。有没有办法让整个字段集和表格居中？

Answer 1

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/

Answer 2

在原始HTML（<div align="center">和</div>）

中添加两行

<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" type="text/css" href="css/Pages.css"> 
    <title>Sign Up</title> 
  </head> 
  <body> 
    <div align="center">
    <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> 
    </div> 
  </body> 
</html>

Answer 3

将此添加到您的css：

body {
    text-align: center;
}

这将使身体以其内容为中心。

然后，按照以下步骤更改css中的.center课程：

.center{
    margin: 0 auto;
    width: 800px;
    text-align: left;
}

这给它一个宽度（否则它将拉伸整个宽度），并重置表单内容的文本对齐方式。

最后，在你的html中更改你的表单标签，如下所示：

<form action="Actions/NewUser.jsp" class="center">

为了在表单上使用您的center课程。

Answer 4

尝试添加

form{width:100%;text-align:center;}

http://jsfiddle.net/marathonman/jzeHu/

Answer 5

简单......简单的事情......

1）给你形成类.center例如：

<form action="Actions/NewUser.jsp" class="center">

2）删除显示：内联;从你的css上课.center

3）添加一个宽度（让它给出与字段集相同的宽度），例如：

.center{
    margin:0 auto;
    width:239px;
}

看到它正常工作：http://jsfiddle.net/jtLur/

Answer 6

尝试：

<form align="center">everything inside</form>

如果不起作用，请尝试浮动：

<form style="float:center;">everything inside</form>

如果它没有工作试试这个（最后一招我的袖子）：

<form style="margin-left:40%;">everything inside</form>

HTML中心表单

6 个答案: