为什么这两个跨度不会在同一位置垂直对齐？

Question

我是一个新手，我今天尝试使用img和ap元素制作一个带有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来解决这个问题，肯定会的。

但我不是要离开这个问题，我不仅仅是在寻求解决方案，我想知道为什么，为什么两个跨度之前并没有停留在同一个垂直位置？

谢谢你的时间。

Answer 1

在图像下面有一点间隙，将img声明为块或添加vertical-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/ 。

Answer 2

你必须添加vertical-align: middle到img元素：

 * { 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; vertical-align: middle; /*Add vertical align middle*/ } 

 <div id="bannerwrapper"> <span> <a href="mailto:xxxx@gmail.com"><img src="http://placehold.it/200x100"></a> </span> <span> <strong><a href="mailto:xxxx@gmail.com">xxxx@gmail.com</a></strong> </span> </div> 

我强烈建议您查看vertical-align属性。