使用场景,经常使用设置图片或者表单(行内块元素)和文字的垂直对齐
只针对行内元素和行内块元素有效,对块元素无效(但是要是把块元素转换成行内块元素,会不会生效呢?)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pa0p0VjC-1626714624881)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210719234614505.png)]
vertical-align:baseline(基线)|top(顶线)|middle(中线)|bottom(底线)
vertical-align是加在图片img中,这样这一行的文字就可以和图片有一个对齐效果
vertical-align:middle(图片和文字垂直居中)
**补充一个小知识是用来显示斜体的跟**类似
vertical-align和行内块元素更搭配哦
如果是图片就不用了转换成行内块元素,如果是一个盒子,添加的背景图片,就需要转换成行内块元素。
textarea也是行内块元素。
表单和图片都是行内块元素
5.2、解决图片底部默认空白缝隙的问题
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐
解决方式:给图片添加vertical-align:middle|top|bottom就不会有空白信息
可以把图片转化成块元素,就不会有空白孔隙了 display:block;