HTML/CSS注册表单如何将文本从居中改为左对齐至容器边框

问题现状 #

使用HTML、CSS编写简易注册表单时，需要将already have an account ? Log in文本左对齐，对齐到天蓝色表单区域的左边界，现有代码无法实现该效果，当前运行效果：

原有代码 #

HTML部分 #

<div class="register-bg">
  <div class="register-container">
    <form>
      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required />
      <label for="password"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="password" required />
      <button type="submit" class="signup">Sign Up</button>
      <Link>
        <h1 class="register-login">
          alredy have an account ? Log in
        </h1>
      </Link>
    </form>
  </div>
</div>

CSS部分 #

.register-bg{
  height: 100vh;
  background-size: cover;
  width: 100%;
  background-image: url(../public/images/bg.jpg);
}

.register-container{
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 70%;
  margin-left:27rem;
  background: rgb(53, 105, 46);
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}

.register-container > form{
  background:skyblue;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 70%;
  justify-content: center;
  align-items: center;
}

.register-container input{
  width: 80%;
  font-size: 15px;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  text-align: center;
  border: none;
  background: #f1f1f1;
}
.register-login {
  color:  black;
  font-size: 15px;
}
.signup{
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  background-color: rgb(10, 119, 13);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  opacity: 0.9;
}

问题根源 #

• 天蓝色form容器是纵向flex布局，设置了align-items: center，所有直接子元素默认水平居中，登录文本块自然不会贴左
• 登录文本块没有设置和输入框一致的80%宽度，无法和输入框、按钮的左右边界对齐，也就没法对准表单区域的边框位置
• 代码存在两处不合理点：一是<Link>是前端框架路由组件，原生HTML无此标签，非框架环境下会失效；二是小号提示文本使用h1标签不符合语义规范，且文本存在拼写错误（alredy应为already）。

修复步骤 #

1. 为form内所有直接子元素统一设置80%宽度，和输入框宽度保持一致，保证所有表单内容左右边界对齐
2. 给登录文本块设置左对齐，不需要修改父容器的align-items属性，避免影响其他元素的居中效果
3. 可顺手修正文本拼写、标签语义问题

最终修改的CSS代码 #

仅需新增/调整以下样式即可：

/* 给表单加适当内边距，避免内容贴边 */
.register-container > form{
  padding: 25px 0;
}

/* 统一表单内所有直接子元素宽度，和输入框宽度一致 */
.register-container > form > * {
  width: 80%;
}

/* 登录提示文本样式调整 */
.register-login {
  color:  black;
  font-size: 15px;
  text-align: left;
  margin: 10px 0;
  font-weight: normal; /* 清除h1默认粗体，匹配提示文本样式 */
}

如果不想统一设置所有子元素宽度，也可以单独给登录文本的父容器设置样式：

/* 单独控制登录链接容器对齐方式 */
.register-container form Link, .register-container form a {
  width: 80%;
  align-self: flex-start;
}

内容的提问来源于stack exchange，提问作者Arijit das