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.

+3


source to share


2 answers


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 / ... .

+4


source


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>
      

Run codeHide result


I highly recommend taking a look at vertical-align .

+4


source







All Articles