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

我是一名新秀，我试图用2个跨度创建一个带有img和p元素的div。那么，下面是相对代码，但是这两个跨度保持在diff垂直位置。我不知道为什么，因为它们都具有相同的CSS，并且包装的宽度足够长。为什么这两个跨度不在同一个位置垂直对齐？

<div id="bannerwrapper"> 
    <span> 
     <a href="mailto:[email protected]"><img src="mail.png"></a> 
    </span> 
    <span> 
     <strong><a href="mailto:[email protected]">[email protected]</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来解决这个问题，肯定会。

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

谢谢你的时间。

来源

2015-04-25 Fadeoc Khaos

下图有一点空隙，声明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/。

来源

2015-04-25 17:44:35 panther

再次感谢“更多的东西”链接，现在我明白了:) –

您必须添加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:[email protected]"><img src="http://placehold.it/200x100"></a> 
 
    </span> 
 
    <span> 
 
     <strong><a href="mailto:[email protected]">[email protected]</a></strong> 
 
    </span> 
 

 
</div>

我强烈建议去看看，以vertical-align财产。

来源

2015-04-25 17:44:39

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

回答

相关问题