将内容置于 div 内居中，同时“保留”各个元素

Question

我正在构建一个非常简单的网站，但我在

<form>

网站内部的

<div>

礼仪方面遇到了很多麻烦。我知道互联网上的“以 div 为中心”的教程可能比宇宙中的星星还多，这确实是一个“过度使用”的主题。

但是，在我搜索了很多不同的网站、教程和文档后，我无法在自己的代码中应用逻辑来将

<form>

礼仪的项目居中，同时遗漏一些。在我的代码中，我想将所有内容放置在中间，就像现在一样。但是，我希望“登录”标签位于左侧。我尝试使用以下 css 代码执行此操作，应用

text-align:left

选项，但仍然没有结果。

.container {
  position: absolute;
  width: 600px;
  height: 750px;
  background-color: #493c4f;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50px;
  text-align: center;
  display: grid;
  place-items: top;
}

.container div h1 {
  color: white;
  font-family: Barlow;
  font-size: 50px;
}

.container form {
  display: grid;
  place-items: center;
  top: 0;
  gap: 200px;
  display: block;
}

.container form label {
  text-align: left;
}

<div class="container">
  <div>
    <form>
      <h1>Login</h1>
      <label for="fname">First name:</label>
    </form>
  </div>
</div>

目前情况如何：

任何帮助将非常感激，因为我已经被困在这个问题上将近半天了。

Answer 1

您必须通过从

text-align: center;

部分删除

.container{

来调整 .css 文件。并将它们添加到

.container div h1{

和

.container form{

部分。即：

.container{
    position: absolute;
    width: 600px;
    height:750px;
    background-color: #493c4f;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50px;
    display: grid;
    place-items: top;
    
}


.container form h1{
    color: white;
    font-family: Barlow;
    font-size: 50px;
    place-items: left;
    text-align: left;
}


.container form{
    display: grid;
    place-items: center;
    top: 0;
    gap:200px;
    display: block;
    text-align: center;
    
}

.container form #fname{
    text-align: center;

}