固定位置在 div css

Question

我是 css 的新手，我真的无法随心所欲地解决所有问题... 如何将 h1 垂直对齐到用户表单的开头？但对我来说最重要的问题是我无法将支票和 link 居中，我希望它一个位于另一个下方并以 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>

Answer 1

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

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

Answer 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>

Answer 3

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

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

我不太确定您想对支票部分做什么。如果您使用 "text-align: center"，这将使它居中，或使用与上面相同的代码将其与按钮对齐。

Answer 4

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

固定位置在 div css

fix position in a div css

html

css

position

alignment