前端学习笔记：使用vertical-align实现图片文字垂直居中对齐

vertical-align

一、实现图片文字垂直居中对齐
图片来自百度图片，侵删

<style>
        /* vertical-align是行内元素或者行内块元素的专属 */
        img {
            /* 1.默认是基线对齐 */
            /* 2.底部对齐 */
            /* vertical-align: bottom; */
            /* 3.图片文字居中对齐 */
            vertical-align: middle;
            /* 4.顶部对齐 */
            /* vertical-align: top; */
        }
</style>

二、用vertical-align去除图片底侧空白缝隙

<style>
        div {
            border: 2px solid red;
        }

        img {
            /* 图片底侧空白缝隙解决方案 */
            vertical-align: bottom;
        }
</style>