如何使表单元素每一行垂直内容对齐

要使HTML表单元素的每一行垂直内容对齐，你可以使用CSS来控制。这里有几个常见的方法：

1. **Flexbox布局**:
如果你的表单是在现代浏览器支持下，可以使用 Flexbox。设置容器为 `display: flex;`，然后使用 `align-items: center;` 或者 `justify-content: center;` 来让内容在垂直方向上居中。

<div class="form-container">
  <label>输入框</label>
  <input type="text" />
  <!-- 其他表单元素 -->
</div>

<style>
.form-container {
  display: flex;
  align-items: center; /* 或者 justify-content: center; */
  padding: 10px;
}
</style>

2. **Grid布局** (仅限于支持该布局的浏览器):
CSS Grid也提供了一种强大的方式来组织内容。将容器设置为 `display: grid;`，并调整 `align-items` 属性即可实现垂直居中。

<form class="form-grid">
  <label>...</label>
  <input type="..." />
  <!-- ... -->
</form>

<style>
.form-grid {
  display: grid;
  gap: 10px; /* 可选间距 */
  align-items: center;
}
</style>

3. **传统的浮动或定位**:
对于较老版本的浏览器，可以考虑使用内联块级元素，并结合 `vertical-align: middle;` 和 `line-height` 的配合，但这种方法可能在处理复杂布局时不太灵活。

<form>
  <div style="display: inline-block;">
    <label>...</label><br>
    <input type="..." />
  </div>
  <!-- ...重复以上结构... -->
</form>

记得针对目标浏览器的兼容性进行测试，因为某些样式可能需要特定的前缀，如 `-webkit-` 对于一些老版本的Webkit浏览器（如早期的Chrome或Safari）。