如何在不影响布局中心对齐的情况下在输入框左侧添加标签？

Question

布局图像

以下是我迄今所做的工作：https://jsfiddle.net/codingNewbie/x5f2cj67/

    <main id="login-page" class="container">
        <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" class="btn">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;
}

输入箱和按钮应保持在中心。我需要在左边添加标签，而不影响布局的中心对齐。我怎样才能做到这一点？

谢谢CSS大师

Answer 1

这里不是专家，但一种简单的方法是将固定宽度放到输入端，然后将其中的一半偏移到表单中。

input {
  width: 150px;
}

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

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

Answer 2

第一件事是你的方式处理布局是错误的。但是我不知道css的其他属性，所以我试着向你的lvl解释。只知道这样不好。它更好地使用柔性箱或网格的布局。有很多种方法

  <main id="login-page" class="container">
    <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" class="btn">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;
}

Answer 3

尝试使用display: inline-block来正确地排列标签。

   <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;
      }