全面理解line-height与vertical-align

应用

【1】单行文本水平垂直居中

div{        line-height: 100px;        width: 100px;        text-align: center;        border: 1px solid black;    }       <div>测试文字</div>

　　[注意]好多地方都写着单行文本垂直居中是将高度和行高设置成一样的值，但高度其实是没有必要设置的。仅仅设置行高就可以，文字在一行中本身就是垂直居中显示扫

【2】图片近似垂直居中

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

div{        line-height: 200px;        text-align: center;    }    img{        vertical-align: middle;    }    <div>       <img src="#" alt="#">   </div>

　　由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显

　　[注意]IE7浏览器在写块级元素包含行内元素时一定要写成换行写法，而不要写在一行

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

【3】图片完全垂直居中

　　在方法2的基础上设置块级元素的font-size为0，则可以设置图片完全垂直居中

复制代码div{ line-height: 200px; text-align: center; font-size: 0;}img{ vertical-align: middle;}
复制代码<div> <img src="#" alt="#"></div>

【4】多行文本水平垂直居中

　　由于方法3设置font-size为0的局限性，块级元素里面无法放置文本。方法4主要通过新增元素来实现垂直居中效果，该方法也可用于图片的水平垂直居中

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;    }