Almost vertically middle aligned

Question

Consider the following HTML:

<div class="plaisio">
   <div id="phone">
     <img src="img/phone.png" >
   </div>  
   <div id="phone_num">
     <img src="img/phone_num.png" >
   </div>
 </div>

and its responding CSS:

.plaisio{
overflow: auto;
max-width:320px;
line-height:100px;
margin-top: 25px;
background-color: #333333;
background-image: -ms-linear-gradient(center top , #333333, #000000);
background-image: -moz-linear-gradient(center top , #333333, #000000);
background-image: -webkit-linear-gradient(center top , #333333, #000000);   
}
.plaisio img{
vertical-align:middle;
}
#phone{
float:left;
    width:20%;
margin-left:5%;
margin-right:8%;
}
#phone_num{ 
float: left;
width:65%;
margin-right:2%;
}

You may see it live at http://users.sch.gr/ellhn. Look the phone image and the number at the footer. My query is why the two pictures(phone.png and phone_num.png) are almost and not exactly vertically aligned. If you examine the page thoroughly, you 'll find that the two pictures are nearest to the bottom of .plaisio and not at the middle as someone should expect!

Thank you

Answer 1

dispay inline-block #phone and #phone_num , no float and vertical-align them to each other.

You may set image , as display :block or vertical-align:top or bottom to erase the gap left under (gap used by letters j,q,p,y,).