在 div css 中固定位置答案

【问题标题】：fix position in a div css在 div css 中固定位置
【发布时间】：2020-05-18 13:51:05
【问题描述】：

我是 css 的新手，我真的无法随心所欲地解决所有问题...... 如何将 h1 垂直对齐到用户表单的开头？但对我来说最重要的问题是我无法将支票和链接居中，我希望它在另一个下方并在 div 中居中。我不确定我是否已经很好地定位了 div，但我希望它居中但在页面上不要太低。谢谢大家！

body {
    text-align: left;
    background-image: url("img/lemon.jpg");
    color: #1b1b1b;
}

input[type=text],
input[type=password]{
    width: 65%;
    display: table;
    margin: 0 auto;
    padding: 12px 20px;
    border: none;
    border-bottom: 1px solid darkgray;
    background-color: #e9e9e9;
    box-sizing: border-box;
    margin-bottom: 7px;
    resize: vertical;
}

h1 {
    font-size: x-large;
}
h2 {
    font-size: x-large;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 7px 20px;
    width: 65%;
    height: 20%;
    display: table;
    margin: 0 auto;
    border: none;
    cursor: pointer;
    background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color: #3d94f6;
    border: 1px solid #337fed;
    cursor: pointer;
    color: #ffffff;
    font-size: 17px;

    text-decoration: none;
    text-shadow: -1px 1px 1px #1570cd;
}

button:hover {
    background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    background-color: #1e62d0;
}

button:active {
    position: relative;
    top: 1px;
}

.container {
    width: 35%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 7%;
    background-color: white;
    box-shadow: 2px 2px 11px rgb(11, 11, 11);
    -webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
    -moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
    overflow: hidden;
}

#check {
    display:block;
    margin-top: 7px;
}

span.frgt {
    margin-top: 7px;
    display: block;  
}
a {
    text-decoration: none;
    color: #1e62d0;
}
img {
    width: 100%;
    height: auto;
    opacity: 0.4;
}

<!DOCTYPE html>
<head>
</head>
<body>
    <div class="container">
        <h1>Login</h1>
        <input type="text" placeholder="Username" name="uname" required>
        <input type="password" placeholder="password" name="psw" required>
        <button type="submit">Login</button>
        <hr>
        <label id="check">
            <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
        <span class="frgt">forgot <a href="#">password?</a></span>
    </div>
</body>
</html>

【问题讨论】：

标签： html css position alignment

【解决方案1】：

您可以使用text-align: center; 和vertical-align:top;

如果您的问题仍然存在，请更清楚地说明您想要什么。

【讨论】：

【解决方案2】：

为了更容易对齐元素，只需将它们包装到一个 div 中并使用 CSS 调整 div，而不是处理每个单个元素。

这是您可以做什么的示例。

body {
  text-align: left;
  background-image: url("img/lemon.jpg");
  color: #1b1b1b;
}

.form {
  width: 75%;
  margin: auto;
}

.form-bottom {
  text-align: center;
}

input[type=text],
input[type=password] {
  display: table;
  margin: 0 auto;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid darkgray;
  background-color: #e9e9e9;
  box-sizing: border-box;
  margin-bottom: 7px;
  resize: vertical;
}

h1 {
  font-size: x-large;
}

h2 {
  font-size: x-large;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 7px 20px;
  height: 20%;
  width: 100%;
  display: table;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
  background-color: #3d94f6;
  border: 1px solid #337fed;
  cursor: pointer;
  color: #ffffff;
  font-size: 17px;
  text-decoration: none;
  text-shadow: -1px 1px 1px #1570cd;
}

button:hover {
  background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
  background-color: #1e62d0;
}

button:active {
  position: relative;
  top: 1px;
}

.container {
  width: 35%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: 7%;
  background-color: white;
  box-shadow: 2px 2px 11px rgb(11, 11, 11);
  -webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
  -moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
  overflow: hidden;
}

#check {
  display: block;
  margin-top: 7px;
}

span.frgt {
  margin-top: 7px;
  display: block;
}

a {
  text-decoration: none;
  color: #1e62d0;
}

img {
  width: 100%;
  height: auto;
  opacity: 0.4;
}

<body>
  <div class="container">
    <div class="form">
      <h1>Login</h1>
      <input type="text" placeholder="Username" name="uname" required>
      <input type="password" placeholder="password" name="psw" required>
      <button type="submit">Login</button>
    </div>
    <hr>
    <div class="form-bottom">
      <label id="check">
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label>
      <span class="frgt">forgot <a href="#">password?</a></span>
    </div>
  </div>
</body>

【讨论】：

【解决方案3】：

如果您将 h1 设置为按钮的相同宽度并使用 "margin: 0 auto" 将其居中，这将使 h1 跨越按钮的宽度，默认情况下文本将左对齐按钮的开始。

h1 {
  font-size: x-large;
  width: 65%;
  margin: 0 auto;
}

我不太确定您想对检查部分做什么。如果你使用“text-align: center”，这会将其居中，或者使用与上面相同的代码将其与按钮对齐。

【讨论】：

【解决方案4】：

使用text-align: center; 使容器内的文本居中。

【讨论】：