vertical-align ╰+攻爆jí腚メ 2022-11-09 00:59 132阅读 0赞 ## 解释 ## CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。 官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 **语法：** > vertical-align : baseline | top | middle | bottom ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20210314112129435.png] ## 一个小bug ## bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。 主要解决方法有两种： 1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的） 2.把图片转换为块级元素 display: block; [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210314112108139.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ==,size_16,color_FFFFFF,t_70 [20210314112129435.png]: /images/20221023/8a787fe198cb4c63a05d8dee413a4fa4.png
还没有评论，来说两句吧...