如何垂直对齐输入字段

在设计表单时，我们常常需要垂直对齐多个输入字段，以提高表单的美观性和可读性。本文将介绍如何通过CSS实现输入字段的垂直对齐。

方法一：使用表格布局

我们可以将表单放在一个表格中，每个输入字段放在一个表格单元格中。通过设置表格单元格的垂直对齐方式为middle，就可以实现输入字段的垂直对齐。

<table>
  <tr>
    <td><label for="name">姓名：</label></td>
    <td><input type="text" id="name"></td>
  </tr>
  <tr>
    <td><label for="email">邮箱：</label></td>
    <td><input type="email" id="email"></td>
  </tr>
  <tr>
    <td><label for="message">留言：</label></td>
    <td><textarea id="message"></textarea></td>
  </tr>
</table>

td {
  vertical-align: middle;
}

方法二：使用Flex布局

Flex布局是一种弹性布局，可以很方便地实现输入字段的垂直对齐。我们将表单放在一个Flex容器中，设置Flex容器的垂直对齐方式为center，就可以实现输入字段的垂直对齐。

<div class="form">
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name">
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email">
  </div>
  <div>
    <label for="message">留言：</label>
    <textarea id="message"></textarea>
  </div>
</div>

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

以上就是实现输入字段垂直对齐的两种方式。使用哪种方式取决于具体的需求和场景。