vertical-align 表单元素垂直对齐的解决方法

下面是关于 vertical-align 属性的完整攻略：

一、vertical-align 属性的作用

vertical-align 属性用于设置表单元素的垂直对齐方式。它的取值范围包括：

• baseline：基线对齐。
• sub：下标对齐。
• super：上标对齐。
• top：顶部对齐。
• middle：中部对齐。
• bottom：底部对齐。
• text-top：文本顶部对齐。
• text-bottom：文本底部对齐。

二、解决方法一：设置 line-height 和 vertical-align

如果子元素是单行文本或者单个图标，可以通过设置 line-height 和 vertical-align 来实现垂直居中。例如：

<div class="container">
  <span class="icon">❤️</span>
  <span class="text">我喜欢你</span>
</div>

.container {
  height: 80px;
  line-height: 80px;
}

.icon {
  font-size: 24px;
  vertical-align: middle;
}

.text {
  font-size: 16px;
  vertical-align: middle;
  margin-left: 10px;
}

上面的代码中，父元素 .container 的高度为 80px，同时设置了行高为 80px，使得其中的两个子元素都能够垂直居中。

三、解决方法二：使用 display: table 和 display: table-cell

如果子元素的高度不一致，或者是一个复杂的结构，可以使用 display: table 和 display: table-cell 来实现垂直居中。例如：

<div class="container">
  <div class="cell">
    <img src="./img/avatar.jpg">
  </div>
  <div class="cell">
    <h2>网站标题</h2>
    <p>网站描述网站描述网站描述网站描述网站描述网站描述</p>
  </div>
</div>

.container {
  display: table;
  width: 100%;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  padding: 20px;
}

img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

上面的代码中，父元素 .container 设置了 display: table，子元素 .cell 设置了 display: table-cell 和 vertical-align: middle，使得其中的两个子元素都能够垂直居中。同时，由于 .cell 的宽度相等，两个子元素也实现了水平居中。

四、总结

以上就是 vertical-align 属性对于表单元素的垂直对齐方式的解决方法。在实际开发中，我们可以根据不同的情况选择不同的方法来实现垂直居中。