全面理解line-height与vertical-align

//正确1<div> <img src="#" alt="#"></div>//正确2<div><img src="#" alt="#"><!-- 这里要折行或空格 --></div>//错误<div><img src="#" alt="#"></div>

　　在要领2的基本上配置块级元素的font-size为0，则可以配置图片完全垂直居中

复制代码

div{ line-height: 200px; text-align: center; font-size: 0;}img{ vertical-align: middle;}

复制代码

<div> <img src="#" alt="#"></div>

　　因为要领3配置font-size为0的范围性，块级元素内里无法安排文本。要领4首要通过新增元向来实现垂直居中结果，该要领也可用于图片的程度垂直居中

XML/HTML Code复制内容到剪贴板

div{   

    height: 100px;   

    width: 200px;   

    background-color: pink;   

    text-align: center;   

}   

span{   

    display:inline-block;   

    vertical-align: middle;   

    line-height: 20px;   

    width: 100px;   

}       

i{   

    display: inline-block;   

    height: 100%;   

    vertical-align: middle;   

}  

XML/HTML Code复制内容到剪贴板

<div>  

       <i></i><span>我是出格长的出格长的出格长的出格长的多行笔墨</span>  

   </div>    

【5】图标和文本对齐

<要领一>行使长度负值

复制代码

img{ vertical-align: -5px;}

　　按照实践履历，20*20像素的图标后头跟14px的笔墨，vertical-align配置为-5px可以到达较量好的对齐结果

<要领二>行使文本底部对齐

复制代码

img{ vertical-align: text-bottom;}

　　行使baseline会使图标偏上；行使top/bottom会受到其他行内元素影响造成定位毛病；行使middle必要刚好的字体巨细且兼容性不高；行使text-bottom较吻合，不受行高及其他内联元素影响

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!