Search code examples
htmlcssalignmentvertical-alignmenttext-alignment

How to align two inputs horizontally

I am currently a very beginner in css and html. I am trying to make a login page, but i just can't align my two inputs. I want to have the labels "Username :" and "Password :" on the left of my text inputs, and that shift the inputs.

I have something that looks like this:

shift between two inputs

I want my two inputs to be aligned and not shifted like you can see on the image.

I tried to align my inputs with text-align, align-items, flex, or grid on CSS, but nothing did it. I managed to get them aligned if i put a "display: block;" in my CSS code, but it places the label on top of the input instead of on its left, which is what i want. I guess i just don't understand how it works, and i hope someone can help me on deepening my understand of alignment on CSS.

div.Loging {
  background: url("https://via.placeholder.com/800") no-repeat center center;
  background-size: cover;
  height: 800px;
  text-align: center;
}

div.Username-Password input {
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
<link href='./index-style.css' rel='stylesheet'>

<head>
  <title>Site Guillaume Test</title>
</head>

<body>
  <div class="Loging">
    <h2>Login :</h2>
    <div class="Username-Password">
      <form>
        <label for="pseudo">Username :</label>
        <input type="text" name="pseudo" id="pseudo" placeholder="Enter Username" required>
        <br>
        <label for="password">Password :</label>
        <input type="password" name="password" id="password" placeholder="Enter Password" required>
      </form>
    </div>
  </div>
</body>

Solution

  • Using the code you provided - changing as little as possible - is this what you were looking for?

    StackBlitz for reference and editing

    div.Loging {
  background: url("./images/index-background.jpg") no-repeat center center;
  background-size: cover;
  height: 800px;
  text-align: center;
}

.Username-Password input {
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.Username-Password {
  display: flex;
  justify-content: center;
}

.input-group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

form {
  width: 50%;
}
    <body>
  <div class="Loging">
    <h2>Login :</h2>
    
    <div class="Username-Password">
      <form>
        <div class="input-group">
          <label for="pseudo">Username :</label>
          <input type="text" name="pseudo" id="pseudo" placeholder="Enter Username" required>
        </div>
        
        <div class="input-group">
          <label for="password">Password :</label>
          <input type="password" name="password" id="password" placeholder="Enter Password" required>
        </div>
      </form>
    </div>
  </div>
</body>