Input and label in center of screen-CodePudding

I creating signup form. I ran into a problem. how to make input wider without fixed width like width: 420px. And input and label place in the center. I want something like this: image. But now I have this: image.

My html code:

  <div className="container">
    <h1 className="title">Create an account</h1>
       
     <form className="form">
        <div className="form-outline">
            <label className="input-label">Your Name</label>
            <input
            name="username"
            type="text"
            className="input"
            value={input.username}
            onChange={onInputChange}
            onBlur={validateInput}
           />           
        </div>

        <div className="form-outline">
            <label className="input-label">Your Email</label>
            <input
              name="email"
              type="email"
              className="input"
              value={input.email}
              onChange={onInputChange}
              onBlur={validateInput}
            />
        </div>

        <div className="form-outline">
            <label className="input-label">Password</label>
            <input
              name="password"
              type="password"
              className="input"
              value={input.password}
              onChange={onInputChange}
              onBlur={validateInput}
            />
        </div>

        <div className="form-outline">
            <label className="input-label">Repeat your password</label>
            <input
              name="confirmPassword"
              type="password"
              className="input"
              value={input.confirmPassword}
              onChange={onInputChange}
              onBlur={validateInput}
            />
        </div>

        <div className="form-check">
            <input className="form-check-input" type="checkbox" value="" />
            <label className="form-check-label">
                I agree all statements in
                <a className="terms" href="/#">Terms of service</a>
            </label>
        </div>

        <div className="button">
            <button className="btn">Create account</button>
        </div>

        <p className="have-account">
            Have already an account
            <a className="login-here" href="/#">Login here</a>
        </p>
    </form>

My css code:

.container {
padding: 16px;
width: 80%;
margin: 5% auto 0 auto;
}

.title {
text-align: center;
font-size: 2.5rem;
color: #0d6efd;
}

.input-label {
color: #6c757d;
}

.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
}

.input {
padding: 0.45rem;
margin: 0.3rem 0 1.3rem 0;
font-size: 1.25rem;
border-radius: 0.5rem;
display: block;
color: #212529;
line-height: 1.5;
border: 1px solid #ced4da;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input:focus {
color: #212529;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check {
margin-bottom: 3rem;
justify-content: center;
display: flex;
}

.form-check-label {
padding-left: 0.5rem;
font-size: 1.1rem;
}

.form-check-input {
border-radius: 0.25rem;
border: 1px solid #a9a9a9;
width: 1.3em;
height: 1.3em;
}

.form-check-input:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.terms {
color: #0d6efd;
text-decoration: underline;
padding-left: 0.2rem;
}

.terms:hover {
color: #0a58ca;
}

.button {
margin-bottom: 1.5rem;
justify-content: center;
display: flex;
}

.btn[disabled] {
opacity: .65;
cursor: not-allowed;
}

.btn {
cursor: pointer;
color: #fff;
background-color: #0d6efd;
border: none;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
border-radius: 0.375rem;
}

.have-account {
text-align: center;
font-size: 1.1rem;
}

.login-here {
color: #0d6efd;
font-weight: bold;
text-decoration: underline;
padding-left: 0.2rem;
}

.login-here:hover {
color: #0a58ca;
}

Edited:

Also I tried this:

.input-label {
color: #6c757d;
}

.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}

but my label hit in the middle of the screen. image For label float: left not working. So I'm need to place label on the left side, and input make wider.

CodePudding user response：

Just remove align-items

.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
justify-content: center;
display: flex;
flex-direction: column;
}

Note : Set a break point for media as well as wider screens.

Edits: Please use this corrected css ,





.form {
  max-width: 500px;
  margin: 0 auto;
}

.container {
  padding: 16px;
  width: 80%;
  margin: 5% auto 0 auto;
  }
  
  .title {
  text-align: center;
  font-size: 2.5rem;
  color: #0d6efd;
  }
  
  .input-label {
  color: #6c757d;
  }
  
  .form-outline {
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
  }
  
  .input {
  padding: 0.45rem;
  margin: 0.3rem 0 1.3rem 0;
  font-size: 1.25rem;
  border-radius: 0.5rem;
  display: block;
  color: #212529;
  line-height: 1.5;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width:100%;
  }
  
  .input:focus {
  color: #212529;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  
  .form-check {
  margin-bottom: 3rem;
  justify-content: center;
  display: flex;
  }
  
  .form-check-label {
  padding-left: 0.5rem;
  font-size: 1.1rem;
  }
  
  .form-check-input {
  border-radius: 0.25rem;
  border: 1px solid #a9a9a9;
  width: 1.3em;
  height: 1.3em;
  }
  
  .form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  
  .terms {
  color: #0d6efd;
  text-decoration: underline;
  padding-left: 0.2rem;
  }
  
  .terms:hover {
  color: #0a58ca;
  }
  
  .button {
  margin-bottom: 1.5rem;
  justify-content: center;
  display: flex;
  }
  
  .btn[disabled] {
  opacity: .65;
  cursor: not-allowed;
  }
  
  .btn {
  cursor: pointer;
  color: #fff;
  background-color: #0d6efd;
  border: none;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 0.375rem;
  }
  
  .have-account {
  text-align: center;
  font-size: 1.1rem;
  }
  
  .login-here {
  color: #0d6efd;
  font-weight: bold;
  text-decoration: underline;
  padding-left: 0.2rem;
  }
  
  .login-here:hover {
  color: #0a58ca;
  }