I've been trying to get the labels to be on the left side above the text input, but all I've managed to do is make it towards the center instead. What am I doing wrong? Sorry if the way I'm labelling things seem odd, I'm still very new to HTML and CSS.

The output that I want

The output I'm getting

HTML

<div class="account-form">
      <form action="/account-sign-up">
        <div>
          <label for="first">First Name</label>
          <input
            id="first"
            type="text"
            placeholder="e.g. Wan"
            name="first"
            required
          />
        </div>

        <div>
          <label for="last">Last Name</label>
          <input
            id="last"
            type="text"
            placeholder="e.g. Aiman"
            name="last"
            required
          />
        </div>

        <div>
          <label for="email">Email</label>
          <input
            id="email"
            type="email"
            placeholder="e.g. [email protected]"
            name="email"
            required
          />
        </div>

        <div>
          <label for="password">Password</label>
          <input
            id="password"
            type="password"
            placeholder="Must be 9-20 characters"
            name="password"
            minlength="9"
            maxlength="20"
            required
          />
        </div>

        <input type="submit" value="Sign in" />

        <div id="account-extra">
          Already have an account?
          <a href="sign-in.html" id="account-link">Sign In</a>
        </div>
      </form>
    </div>

CSS

.account-form {
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

label {
  color: white;
  display: block;
  margin-top: 30px;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}

input {
  display: block;
  width: 550px;
  margin: 0 auto;
  background-color: #f0f3ff;
  color: #666666;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid transparent;
  outline: none;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.5s;
}

input:hover {
  background-color: white;
}

input:focus {
  cursor: text;
  color: #303030;
  background-color: white;
  border-color: #303030;
}

input[type="submit"] {
  display: block;
  color: white;
  background-color: black;
  font-family: "Epilogue", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-top: 40px;
}

input[type="submit"]:hover {
  color: black;
  background-color: #f0f3ff;
}

#account-extra {
  font-family: "Epilogue", sans-serif;
  color: white;
  margin-top: 30px;
}

#account-extra a {
  color: white;
  text-decoration: none;
  font-weight: 900;
}

CodePudding user response：

Make Parent div width to same as your <input> width so that you can use margin:auto to center a div. Finally you can use text-align: left as shown here

.account-form{
  text-align: left; 
  margin: auto; 
  width: 550px;
}

Note: By default it takes text-align: left. I just mentioned because you used text-align: center

CodePudding user response：

You can add this piece of code for labels

label {
  color: black;
  text-align:left;
  display: block;
  margin-top: 30px;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}