考虑以下 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 的底部,而不是人们所期望的位于中间!
谢谢
最佳答案
dispay inline-block
#phone
和 #phone_num
, no float
并且 vertical-align
它们相互对齐。
您可以将图像设置为 display :block
或 vertical-align:top
或 bottom
以消除 下方留下的空白(字母 j、q、p、y 所使用的间隙)。
关于html - 几乎垂直居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23167986/