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

最新推荐文章于 2022-09-24 21:00:24 发布

原创

最新推荐文章于 2022-09-24 21:00:24 发布 · 260 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bug #html #css

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

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

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

    <body