html - 几乎垂直居中对齐

Question

考虑以下 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>

及其响应的 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%;
}

您可以在 http://users.sch.gr/ellhn 看到它的直播.查看页脚处的电话图像和电话号码。我的问题是为什么两张图片(phone.png 和 phone_num.png)几乎而不是完全垂直对齐。如果仔细检查页面，您会发现这两张图片最靠近 .plaisio 的底部，而不是人们所期望的位于中间!

谢谢

Answer 1

dispay inline-block #phone 和 #phone_num , no float并且 vertical-align 它们相互对齐。

您可以将图像设置为 display :block 或 vertical-align:top 或 bottom 以消除 下方留下的空白(字母 j、q、p、y 所使用的间隙)。