如何将我的文本从中心对齐？

Question

我正在使用HTML和CSS设计一个简单的注册表单。我只想“已经有一个帐户？登录”文字，直到天蓝色边界的边界为止，但是我无法做到这一点。

但是我得到结果

这是我的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;
 }
 

Answer 1

只需将其添加到您的CSS：

.register-login {
  align-self: flex-start;
}

Answer 2

将您的＆lt; link＆gt;在div中将

<div class="login-text-container">
  <Link>
  <h1 class="register-login">
     alredy have an account ? Log in
  </h1>
  </Link>
</div>

其宽度湿润至100％

.login-text-container {
  width: 100%;
}

---

完整代码湿润：

.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;
}

.login-text-container {
  width: 100%;
}

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

      <div class="login-text-container">
        <Link>
        <h1 class="register-login">
          alredy have an account ? Log in
        </h1>
        </Link>
      </div>

    </form>
  </div>
</div>

Answer 3

添加以下代码，对其进行编辑，您可以使用:)

CSS：

.login-button {
  display: block;
  padding: 100%;
  align-items: left;
 }

html：

<div class='login-button'>
      <h1 class="register-login">
        alredy have an account ? Log in
      </h1>
        </div>