为什么这两个 span 在同一位置没有垂直对齐?
Why these two spans doesnt align vertically at the same position?
我是菜鸟,我今天尝试用一个 img 和一个 p 元素制作一个具有 2 个 span 的 div。好吧,下面是相关代码,但是两个span在diff vertical position.I 不知道为什么,因为它们都有相同的css,而且wrapper的宽度足够长.
<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;
}
最后我给第二个span一个float rightcss解决了这个问题,果然可以。
但是我不是离开这个问题,我不是只求解决方案,我想知道为什么,为什么之前两个span没有停留在同一个垂直位置?
感谢您的宝贵时间。
图片下方有一点空隙,声明img
为块或添加vertical-align
。
#bannerwrapper span img{
width: 30px;
height: 21px;
display: block;
}
或
#bannerwrapper span img{
width: 30px;
height: 21px;
vertical-align: middle;
}
上面你有两种可能的解决方案来解决这个问题。 .
需要它的更多原因
您必须将 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属性看看。
我是菜鸟,我今天尝试用一个 img 和一个 p 元素制作一个具有 2 个 span 的 div。好吧,下面是相关代码,但是两个span在diff vertical position.I 不知道为什么,因为它们都有相同的css,而且wrapper的宽度足够长.
<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;
}
最后我给第二个span一个float rightcss解决了这个问题,果然可以。
但是我不是离开这个问题,我不是只求解决方案,我想知道为什么,为什么之前两个span没有停留在同一个垂直位置?
感谢您的宝贵时间。
图片下方有一点空隙,声明img
为块或添加vertical-align
。
#bannerwrapper span img{
width: 30px;
height: 21px;
display: block;
}
或
#bannerwrapper span img{
width: 30px;
height: 21px;
vertical-align: middle;
}
上面你有两种可能的解决方案来解决这个问题。 .
需要它的更多原因您必须将 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属性看看。