2021-05-06 利用vertical-align实现垂直居中效果以及解决图片底部3px的间隙bug

前端OnTheRun

于 2021-05-06 01:50:16 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/116434049

本文介绍了如何使用CSS的vertical-align属性实现元素的垂直居中对齐，并详细解释了为何图片下方常出现3px的间隙bug，原因是图片的基线位于底部。为解决这个问题，提供了两种方法：设置容器的font-size为0或改变vertical-align为middle。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vertical-align可以用来给块元素设置垂直对齐方式,对于非行内块元素需要先转化成行内块元素
示例:

   <style>
        img {
     
            /* img已经是行内块元素 */
            vertical-align: middle;
        }
        
        span {
     
            display: inline-block;
            vertical-align: middle;
        }
    </style>

    <body><