CSS 在HTML中对齐文本框和文本/标签

在本文中，我们将介绍如何使用CSS来对齐HTML中的文本框和文本/标签。

阅读更多：CSS 教程

1. 水平对齐文本框和标签

在HTML表单中，文本框和标签通常是成对出现的。要使它们水平对齐，我们可以使用CSS的浮动属性。

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

label, input {
  float: left;
  margin-right: 10px;
}

在上面的代码中，我们将标签和文本框使用float: left;进行浮动，并通过margin-right属性添加一些间距。这样，文本框和标签就能够水平对齐了。

2. 垂直对齐文本框和标签

除了水平对齐，有时候我们还需要垂直对齐文本框和标签。这时可以利用CSS的垂直对齐属性vertical-align。

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

label, input {
  vertical-align: middle;
}

在上面的例子中，我们将label和input的vertical-align属性设置为middle，这样它们将在垂直方向上居中对齐。

3. 自定义对齐文本框和标签

有时候，我们希望能够自定义文本框和标签的对齐方式。这时可以使用CSS的定位属性来实现。

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

label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
input {
  margin-left: 60px;
}

在上述示例中，我们设置了label的position属性为absolute，然后通过top: 50%;和transform: translateY(-50%);将其垂直居中对齐。同时，通过margin-left属性给input元素添加了一些左边距。

4. 响应式对齐文本框和标签

在开发响应式网页时，我们还需要根据不同的屏幕尺寸来对齐文本框和标签。这时可以使用CSS的媒体查询来实现。

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

@media screen and (max-width: 600px) {
  label, input {
    display: block;
  }
  input {
    margin-left: 0;
  }
}

在上面的代码中，我们使用媒体查询@media screen and (max-width: 600px)来检测是否小于或等于600px的屏幕宽度。如果是，我们将label和input的display属性设置为block，使它们变成块级元素，从而实现垂直对齐。同时，通过margin-left: 0;取消input元素的左边距。