图片上没有line-height垂直居中

时间:2024-07-19 18:04:02
<style>
div {
    width: 150px;
    height: 155px;
    line-height: 155px;
    border: 1px solid #000;
    background: #f00;
    text-align: center;
}
img {
    vertical-align: middle;
}
span {
    display: inline-block;
}
</style>
<div>
    <img src="hl_logo.png" alt="" width="95" height="115">
    <span></span>
</div>

注意我们添加了一个额外的span从而在7以下版本的IE中修复该bug;我们还将display属性设置为inline-block来使我们关键的span拥有“layout”。最后结果:一切都正常了。

相关文章