div里套span,span里套a,a里套img,span里的文字部分,怎么实现垂直居中?请见图

笨笨阿林
  • 272

clipboard.png

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>

clipboard.png

回复
阅读 5.3k
3 个回答

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

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

spanline-height设置为图片高度,然后vertical-align: middle;

wilim
  • 1
新手上路,请多包涵

清楚文字和图片的对齐方式就好处理了,默认的是基线对齐,改变对齐方式用vertical—align设置middle

宣传栏