CSS高级技巧---vertical-align属性应用

一、实现图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical是基线对齐

vertical-align: baseline | top | middle | bottom

• baseline:默认，元素放置在父元素的基线上
• top:把元素的顶端与行中最高元素的顶端对齐
• middle:把此元素放置在父元素的中部
• bottom：把元素的顶端与行中最低的元素的顶端对齐

二、解决图片底部默认空白缝隙问题

原因：图片底侧会有一个空白缝隙，因为行内块元素和文字的基线对齐
解决方案：

• 1、给图片添加vertical-align：middle | top | bottom等
• 2、把图片转换成块级元素display：block