Layout Image

Here is what I've done so far: https://jsfiddle.net/codingNewbie/x5f2cj67/

    <main id="login-page" >
        <h1>Login</h1>
        <form action="#">
            <!-- <label for="email">Email</label> -->
            <input type="email">
            <br>
            <!-- <label for="password">Password</label> -->
            <input type="password">
            <br>
            <button type="submit" >Login</button>
        </form>
    </main>
    <!-- If you uncomment the labels it will move the inputbox off-center -->

.container{
    max-width: 960px;
    height: 100vh;
    margin: auto;
}

#login-page {
    text-align: center;
}

The inputbox and button should stay at the center. I need to add labels on the left without affecting the center alignment of the layout. How do I achieve this?

Thanks CSS Gurus

CodePudding user response：

Not a guru here, but a easy way would be put fix width to the inputs then offset half of them to the form.

input {
  width: 150px;
}

.fields {
  margin-left: -75px;
}

https://jsfiddle.net/9o86uaxg/5/

CodePudding user response：

first thing is your way for handle layout is mistake. but i gussed u dont know about other properties of css so i tried to explain to your lvl. just know this way is not good. its better to use flexbox or grid for layout. there is many ways

  <main id="login-page" >
    <h1>Login</h1>
    <form action="#">
      <label for="email">Email</label>
      <input type="email">
      <br>
      <label for="password">Password</label>
      <input type="password">
      <br>
      <button type="submit" >Login</button>
    </form>
  </main>

.container {
  max-width: 960px;
  height: 100vh;
  margin: auto;
}
h1 {
  text-align: center;
}

#login-page {
}
input,
button {
  float: right;
  margin-right: 50%;
  transform: translateX(50%);
}
label {
  float: left;
  margin-left: 250px;
}

CodePudding user response：

Try to use display: inline-block to arrange the labels properly. 

   <form action="/form/submit" method="post">
      <div>
        <label for="email">Email:</label>
        <input type="email" autofocus />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" />
      </div>
      <input type="submit" value="Login" />
    </form>

      div {
        margin-bottom: 10px;
      }
      label {
        display: inline-block;
        width: 110px;
        color: #777777;
      }
      input {
        padding: 5px 10px;
      }