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

向对方发送inline-block #phone和#phone_num，否 float和vertical-align。

您可以将图片设置为display :block或vertical-align:top或bottom以消除下面的间隙（字母j，q，p，y使用的间隙）< / em>的

几乎垂直中间对齐

1 个答案: