网上谈垂直居中的人很多了,我就当学习一下了。说实话,还没怎么用过。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> div{border:1px solid;margin:10px 20px;} img{border:1px solid;} .l1{height:100px;line-height:100px;} .l2{padding:20px 0;} .l3{height:80px;display:table-cell;vertical-align:middle;} .l4{height:80px;} .l4 span{display:inline-block;height:100%;vertical-align:middle;} .l5{height:80px;} .l5 p{height:40px;margin-top:expression(parseInt(this.currentStyle.height)/2)} .l6{height:80px;} .l6 span{height:100%;writing-mode:tb-rl;text-align:center;} </style> </head> <body> <div class="l1"> <strong>line-height方法</strong>,只对文字a,label,input元素有效,对图片无效.ie6对input无效。 <abbr title="">abbr</abbr> <label for="">lable</label> </div> <div class="l2"> <strong>padding-top,padding-bottom方法</strong> 高度没设置!!!无任何兼容问题 <input/> <abbr title="">abbr</abbr> <label for="">lable</label> </div> <div class="l3"> <strong >table-cell方法</strong> <img style="vertical-align:middle;" src="http://images.cnblogs.com/logo_small.gif" alt="博客园" /> 缺点很多,ie6,7不兼容,下面的margin都没了。 </div> <div class="l4"> <span></span><strong>display:inline-block,vertical-align:middle方法</strong> 通过设置一个元素高度为100%;其他元素就都可以居中 </div> <hr style="color:red;margin:20px 0;"/> <div class="l5"> <p><strong>ie6-7,通过expression表达式</strong></p> </div> <div class="l6"><span> <img style="vertical-align:middle;" src="http://images.cnblogs.com/logo_small.gif" alt="博客园" /></span> </div> </body> </html>
line-height方法,只对文字a,label,input元素有效,对图片无效.ie6对input无效。
abbr
padding-top,padding-bottom方法
高度没设置!!!无任何兼容问题
abbr
table-cell方法
缺点很多,ie6,7不兼容。
display:inline-block,vertical-align:middle方法
通过设置一个元素高度为100%;其他元素就都可以居中
ie6-7,通过expression表达式