Sign in Form not align to center

Question

I face an issue while I want to align my sign-in form of test website not align to center. can anyone help me to resolve this issue?

for better understanding here I attached my js form and CSS file.

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.form-container {
  display: flex;
  flex-direction: column;
  width: 32rem;
  padding: 2rem;
  border: 0.1rem #c0c0c0 solid;
  border-radius: 0.5rem;
  list-style-type: none;
}

.form-container li {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

input {
  padding: 1rem;
  border: 0.1rem #c0c0c0 solid;
  border-radius: 0.5rem;
}

<form onSubmit={submitHandler}>
  <ul className="form-container">
    <li>
      <h2>
        Sign In
      </h2>
    </li>
    <li>
      <label for="email">
          Email
      </label>
    </li>
    <li>
      <label for="password"> Password </label>
    </li>
    <li>
      <button>Signin</button>
    </li>
    <li>
      New to Tangail Saree?
    </li>
    <li>
      <Link to="/register"> Create your account</Link>
    </li>
  </ul>
</form>

Edit: It solved. I use dot in front of form that's the reason it not working.

If you dont want to align to the center just simply remove justify-content and align-items rules from the css — Daniel Kemeny, Aug 23 '20 at 07:02

Radical Edward · Answer 1 · 2020-08-23T07:12:33.987

You applied css to .form instead of form

change .form to form

 form {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

This works!

form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.form-container {
  display: flex;
  flex-direction: column;
  width: 32rem;
  padding: 2rem;
  border: 0.1rem #c0c0c0 solid;
  border-radius: 0.5rem;
  list-style-type: none;
}

.form-container li {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

input {
  padding: 1rem;
  border: 0.1rem #c0c0c0 solid;
  border-radius: 0.5rem;
}

<html>
<body>
<form onSubmit={submitHandler}>
  <ul className="form-container">
    <li>
      <h2>
        Sign In
      </h2>
    </li>
    <li>
      <label for="email">
          Email
      </label>
    </li>
    <li>
      <label for="password"> Password </label>
    </li>
    <li>
      <button>Signin</button>
    </li>
    <li>
      New to Tangail Saree?
    </li>
    <li>
      <Link to="/register"> Create your account</Link>
    </li>
  </ul>
</form>
</body>
</html>

@Sazzad78 Plz check this – Radical Edward Aug 23 '20 at 07:10 — Radical Edward, Aug 23 '20 at 07:10
@AlwaysHelping Aggree with you, so updated the answer – Radical Edward Aug 23 '20 at 07:10 — Radical Edward, Aug 23 '20 at 07:10

Sign in Form not align to center

1 Answers1