css - div里套span，span里套a，a里套img，span里的文字部分，怎么实现垂直居中？请见图

问题描述

问 题

html和css代码如下：

        <div style="text-align: center; height: 28px;">
            <span style="text-align: center; display: inline-block; font-size: 13px; line-height: 28px">Powered by:
                &nbsp;
                <a href="https://www.upyun.com" target="_blank" style="line-height: 28px">
                    <img src="upyun_logo2.png" width="80" height="" />
                </a>
            </span>
        </div>

实际上，之前的代码中，a标签是没有嵌套在span中的，而是与span同级，如下：

        <div style="text-align: center; height: 28px;">
            <span style="text-align: center; display: inline-block; font-size: 13px; line-height: 28px">Powered by:
                &nbsp;
            </span>
            <a href="https://www.upyun.com" target="_blank" style="line-height: 28px">
                <img src="upyun_logo2.png" width="80" height="" />
            </a>
        </div>

后来在网上看到有人说将a标签放在span中应该就可以了。不过，两者试了之后，反正死活无法实现垂直居中。

---

补充：

回答中有朋友说在span里的line-height等于图片高度的情况下，再设置span里的vertical-align为middle。确实，如果没有a标签，那这个方法有效；但有了后面的a标签，会受a标签的影响，而导致无效。

另外一个亦秋网友在问题评论中的回答，最终解决了问题：在img里设置vertical-align为middle。不知道原理何在？

---

再补充：

经过不断测试，发现精简成如下这样，已经足够实现效果了：

        <div style="text-align: center;">
            <span style="font-size: 13px;">Powered by: </span>
            <a href="https://www.upyun.com" target="_blank">
                <img src="upyun_logo2.png" width="80" style="vertical-align: middle"/>
            </a>
        </div>

解决方案

回答中有朋友说在span里的line-height等于图片高度的情况下，再设置span里的vertical-align为middle。确实，如果没有a标签，那这个方法有效；但有了后面的a标签，会受a标签的影响，而导致无效。

另外一个亦秋网友在问题评论中的回答，最终解决了问题：在img里设置vertical-align为middle。不知道原理何在？

这篇关于css - div里套span，span里套a，a里套img，span里的文字部分，怎么实现垂直居中？请见图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！