三十四、vertical-align属性应用

vertical-align

CSS的属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的，但是它只针对于行内元素或者行内块元素有效。
语法：

vertical-align : baseline | top | middle | bottom

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐。
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

image.png

1、 图片、表单和文字对齐

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

image.png

此时可以给图片、表单这些行内块元素的 就可以让文字和图片垂直居中对齐了。

    
    
    
    
    


      pink老师是刘德华

    

     请您留言

image.png

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

bug：图片底侧会有一个空白缝隙，原因是行内块元素和文字的基线对齐。

image.png

主要解决方法有两种：
1.给图片添加 vertical-align: middle | top | bottom 等;（提倡使用）
2.把图片转换为块级元素 display：block；

image.png

image.png