Question

我制作了一个登录表单，该表单在水平方向上居中完美适合宽屏。不知何故，即使我使用了视口标记和margin: 0 auto;，小屏幕也不是这样。怎么了，我该如何正确居中？

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 27.5%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}

<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </fieldset>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

这是我的代码：https://jsfiddle.net/gabwvf68

Answer 1

这是您的问题所在：

    fieldset {
      border: 1px groove black;
      border-radius: 5px;
    }

    form {
      font-family: Segoe UI;
      margin: 0 auto;
      margin-top: 15%;
      width: 27.5%;
    }

我们可以通过以下操作简单地解决它：

    fieldset {
      border: 1px groove black;
      border-radius: 5px;
      width: 27.5%;
      margin: 0 auto;
    }

    form {
      font-family: Segoe UI;
      margin-top: 15%;
    }

将宽度和margin: 0 auto;移动到字段集。

margin 0 auto;应该始终放在要居中而不是父块的块上。

Answer 2

您所形成的宽度（以百分比为单位）小于fieldset区域。因此，当您将窗口调整为较小的尺寸时，它会向右移动以获取窗口的剩余风量。尝试提供固定宽度或宽度等于fieldset元素宽度。

就像下面我给的width:55%一样，它适用于所有窗口大小。如果要按照示例中的说明选择框宽，请尝试将其设置为width:300px

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 55%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}

<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </fieldset>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

Answer 3

您的问题在于使用$ BAR="1 2 3 '45 ' 6 7" ./envargparse.py 123 Namespace(bar=[1, 2, 3, 45, 6, 7], baz=123) $ ./envargparse.py -h usage: Test Program [-h] --bar BAR [BAR ...] baz positional arguments: baz optional arguments: -h, --help show this help message and exit --bar BAR [BAR ...] Help message for bar. (default: 22) (env_var: BAR)标记，即使父表单的尺寸正确且居中，<fieldset>子代也不会显示为该尺寸。

如果您不需要fieldset标签，可以采用一种解决方法，就是将fieldset与类div一起使用。

您可能还应该在输入字段中包含一个fieldset属性，以便它们保留在输入表单中。

示例

width: 100%

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

.fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 27.5%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  width: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}

希望这会有所帮助！

Answer 4

您的表单实际上居中，但是在小屏幕上，表单内容（字段集，输入等）会溢出表单区域。您可以通过将background-color临时添加到表单中来可视化此内容。为了解决此问题，请尝试为较小的屏幕设置较大的表单宽度。另外，如有可能，请为px使用width的值，而不是%

我如何居中此表格？

4 个答案: