vertical-align 属性

vertical-align 通常用于设置图片或者表单和文字的垂直对齐，只对于行内元素或行内块元素有效。

img {
  /* 默认，元素放在父元素基线上 */
  vertical-align: baseline;

  /* 元素的顶端于行中最高元素的顶端对齐 */
  vertical-align: top;

  /* 元素放在父元素的中部 */
  vertical-align: middle;

  /* 元素的底部和整行的底部对齐 */
  vertical-align: baseline;
}

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐，将属性设置为 middle，就可以让文字和图片垂直居中对齐了。

有个奇怪的现象，如果将图片和文字放在一行，图片底部会有一条缝隙，我们给其父元素加个边框看起来更明显一点：

这是因为图片默认是和文字的基线对齐的，常用的解决方法有两种：

1、给图片添加 vertical-align 属性，值设为 middle / top / bottom

img {
  vertical-align: top ｜ middle ｜ bottom;
}

2、把图片转换为块级元素

img {
  display: block;
}