我是个菜鸟,今天我试着用一个img和一个p元素制作一个2跨的div。好吧,下面是相关代码,但是这两个跨距保持在diff垂直位置,我不知道为什么,因为它们都有相同的css,而且包装器的宽度足够长。

<div id="bannerwrapper">
    <span>
        <a href="mailto:xxxx@gmail.com"><img src="mail.png"></a>
    </span>
    <span>
        <strong><a href="mailto:xxxx@gmail.com">xxxx@gmail.com</a></strong>
    </span>
</div>

而且,css是
*{
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

#bannerwrapper{
    width: 163px;
    height: 21px;
    margin: 10px auto;
}

#bannerwrapper span{
    display: inline-block;
    height: 21px;
}

#bannerwrapper span img{
    width: 30px;
    height: 21px;
}

最后,我给了第二个跨度一个浮动的右css来解决这个问题,肯定会的。
但我并没有离开这个问题,我不仅仅是在寻求解决方案,我想知道为什么,为什么这两个跨度之前没有保持在相同的垂直位置?
谢谢你的时间。

最佳答案

在图像下面有一个小间隙,声明img为block或addvertical-align

#bannerwrapper span img{
    width: 30px;
    height: 21px;
    display: block;
}

或者
#bannerwrapper span img{
    width: 30px;
    height: 21px;
    vertical-align: middle;
}

上面有两种解决方法。更重要的是为什么在https://stackoverflow.com/a/27177987/需要它。

10-05 20:44
查看更多