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

最新推荐文章于 2026-06-21 13:47:05 发布

原创最新推荐文章于 2026-06-21 13:47:05 发布 · 279 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bug #html #css

bug&error 同时被 2 个专栏收录

20 篇文章

订阅专栏

css

14 篇文章

订阅专栏

本文介绍了如何使用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>
        <img src="images/10.jpg" alt="" width="200px" height="200px">
        <span>我是垂直居中文本</span>
        <img src="images/11.jpg" alt="" width="300px" height="400px">
    </body>

输出结果:
三个行内块兄弟盒子都设置vertical-align:middle以后,将会以其中的最大高度者为垂直方向上的对齐参照,

这实质上是一种基线(baseline)对齐

而这也可以用来解释为什么img图片下方经常会出现约3px的空隙的常见bug

    <style>
        div {border: solid;}
    </style>
    <body>
        <div><img src="images/10.jpg" width="300px"></div>
    </body>

,此时图片的基线位于其底部
在这里插入图片描述

容器内的文字和图片以baseline对齐,若没有文字,则会留出约3px(取决于容器的font-size),作为文字的替代
  对于这个bug的解决方法,
    一是设置容器的font-size为0;
    二是改变vertical-align的默认值变为middle(推荐)

        div {
            /* font-size: 0; */
            border: solid;
        }    
        img {
            vertical-align: middle;
        }