关于css:verticalalign-属性

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;
}