全面理解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较合适，不受行高及其他内联元素影响

（编辑：晋中站长网）

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