Question

我试图制作一个表单，但是当我尝试集中它时，它只是紧紧抓住#wrapper的左侧。它会对保证金做出反应，但与过去没有任何关系。我已经尝试使用保证金左边的保证金，但仍然没有。我非常确定我已经按照了YouTube教程我正在为角色工作，所以不确定我哪里出错了，有没有人有任何想法？

＆＃13;

body {
  padding: 0;
  margin: 0;
  background-color: #ccc;
}

#wrapper {
  width: 1000px;
  background-color: #FFF;
  margin: 0px auto;
  min-height: 400px;
  margin-top: 40px;
  border: 1px solid #999;
  border-bottom: 3px solid #999;
  border-radius: 5px;
}

#formDiv {
  width: 200px;
  margin: 0px auto;
  margin-top: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Registration Page</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <div id="wrapper">
    <div id="formDiv"></div>
    <form method="POST" action="index.php" enctype="multipart/form-data">
      <label>First Name:</label><br>
      <input type="text" name="fname" /> <br/><br/>
      <label>Last Name:</label><br>
      <input type="text" name="lname" /> <br/><br/>
      <label>Email:</label><br>
      <input type="text" name="email" /> <br/><br/>
      <label>Password:</label><br>
      <input type="password" name="password" /> <br/><br/>
      <label>Image:</label><br>
      <input type="file" name="image" /> <br/><br/>
      <input type="submit" name="submit" />
    </form>
  </div>
</body>
</html>

＆＃13;

Answer 1

您早期关闭了formdiv标记。使用此：

<html>

<head>
    <title>Registration Page</title>
    <link rel="stylesheet" href="css/styles.css" />
</head>

<body>

    <div id="wrapper">

    <div id="formDiv">

    <form method="POST" action="index.php" enctype="multipart/form-data">

    <label>First Name:</label><br>
    <input type="text" name="fname" /> <br/><br/>

    <label>Last Name:</label><br>
    <input type="text" name="lname" /> <br/><br/>

    <label>Email:</label><br>
    <input type="text" name="email" /> <br/><br/>

    <label>Password:</label><br>
    <input type="password" name="password" /> <br/><br/>

    <label>Image:</label><br>
    <input type="file" name="image" /> <br/><br/>

    <input type="submit" name="submit" /> 

    </form>


    </div>


</div>
</body>


</html>

Answer 2

如果您需要居中，还需要居中 form 元素

#wrapper form{
      width: 180px;
    margin: 0 auto;
}

http://jsfiddle.net/47ku1qud/

元素不会移动

2 个答案: