在 css 中垂直对齐输入标签

Question

所以我有一个容器，里面有一个包装器，里面是一个 h1 标签和一个表单，我想对齐所有输入标签和标签开始的 h1 标签，并将标签放在它们的左边。 例如：

         exampleName
    name []
username []

这是我试过的

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

.edit_profile_user_wrapper {
  width: 90%;
  height: 90%;
  vertical-align: baseline;
}

.edit_profile_user_info {
  height: 10%;
  width: 100%;
}

.edit_profile_user_form {
  height: 90%;
  width: 100%;
  border: none;
}

<div className='edit_profile_user_container'>
  <div className='edit_profile_user_wrapper'>
    <div className='edit_profile_user_info'>
      <p>username</p>
    </div>
    <form className='edit_profile_user_form'>
      <div className='edit_profile_input_section'>
        <label for="name">Name</label>
        <input type="text" name="name" />
      </div>
      <div className='edit_profile_input_section'>
        <label for="username">Username</label>
        <input type="text" name="username" />
      </div>
    </form>
  </div>
</div>

Answer 1

这是实现它的简单方法，使用

display: grid

：

.form-container {
  display: grid;
  grid-template-columns: 150px auto;
}

.form-container label {
  grid-column: 1;
  text-align: right;
  padding-right: 0.5rem;
}

.form-container label::after {
  content: ':';
}

.form-container h1 {
  grid-area: 1/2/2/3;
}

.form-container h1 + label {
  grid-row: 2;
}

.form-container input {
  grid-column: 2;
}

<div class='form-container'>
  <h1>exampleName</h1>
  <label for="name">Name</label>
  <input type="text" name="name" />
  <label for="username">Username</label>
  <input type="text" name="username" />
</div>

等效的SCSS：

.form-container {
  display: grid;
  grid-template-columns: 150px auto;
  label {
    grid-column: 1;
    text-align: right;
    padding-right: 0.5rem;
    &::after {
      content: ':';
    }
  }
  h1 {
    grid-area: 1/2/2/3;
    + label {
      grid-row: 2;
    }
  }
  input {
    grid-column: 2;
  }
}

Answer 2

要实现所需的布局，您可以按如下方式修改您的 CSS：

此 CSS 代码将从标签开始的位置对齐输入标签和 h1 标签，并将标签放在它们的左侧。这是应用了 CSS 类的更新后的 HTML 代码：

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

.edit_profile_user_wrapper {
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.edit_profile_user_info {
  margin-bottom: 20px;
  /* Add some spacing between the h1 and the form */
}

.edit_profile_user_form {
  display: flex;
  flex-direction: column;
}

.edit_profile_input_section {
  display: flex;
  align-items: center;
}

.edit_profile_input_section label {
  margin-right: 10px;
  /* Add some spacing between the label and the input */
}

<div class='edit_profile_user_container'>
  <div class='edit_profile_user_wrapper'>
    <div class='edit_profile_user_info'>
      <h1>exampleName</h1>
    </div>
    <form class='edit_profile_user_form'>
      <div class='edit_profile_input_section'>
        <label for="name">Name</label>
        <input type="text" name="name" />
      </div>
      <div class='edit_profile_input_section'>
        <label for="username">Username</label>
        <input type="text" name="username" />
      </div>
    </form>
  </div>
</div>

结果将是一个表单，标签位于输入的左侧，h1 标签与输入对齐。