实现CSS垂直居中：vertical-align 属性的使用和解决图片底部默认空白间隙的问题

实现CSS垂直居中：vertical-align 属性的使用和解决图片底部默认空白间隙的问题

vertical-align:经常用于设置图片或者表单（行内块元素）和文字垂直对齐
注意⚠️：只对于行内元素或行内块元素有效

值	元素
baseline	默认（基线对齐）
top	把元素顶端和行中最高元素的顶端对齐
middle	把此元素放在父元素的中部
bottom	把元素的顶端和行中最低的元素的顶端对齐

具体效果以实操为准，文字描述比较抽象 〄

修复：当行内块元素和文字的基线对齐时（默认就如此），图片底部会出现白色间隙的bug

结局方案：

• 给图片加上vertical-align:middle 或 top 或 bottom等，都可以修复该bug（提倡使用）
• 把图片（行内块元素）转化为行内元素display:block;