Why are these two spans not vertically aligned in the same position?
I'm a newbie, I tried to make a 2-span div today with an img and p element. Well, here's the relative code below, but the two spans remain in the vertical diff. I don't know why as they all have the same css and the width of the wrapper is quite long.
<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>
And 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;
}
Finally, I gave the second range float to the right css to solve this problem, for sure it would.
But I don't leave the problem, I don't just ask for solutions, I want to know why, Why didn't the two spans stay the same upright before?
Thank you for your time.
source to share
There is a small space under the image, declare img
as block or add vertical-align
.
#bannerwrapper span img{
width: 30px;
height: 21px;
display: block;
}
OR
#bannerwrapper span img{
width: 30px;
height: 21px;
vertical-align: middle;
}
You have two possible solutions on how to fix this. Something else, why it is necessary to fooobar.com/questions/2217980 / ... .
source to share
You have to add vertical-align: middle
to the img element:
* {
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>
I highly recommend taking a look at vertical-align .
source to share