垂直居中
一,内联元素的垂直居中之图片
查了多方资料,最终觉得淘宝工程师的做法更能满足我的需求,于是把它记录在此:
铺垫:vertical-align 这个属性的特点,它是相对兄弟级(line-height)来定位的,并且它仅对行内元素有效;
display:table-cell
属性指让标签元素以表格单元格的形式呈现,类似于td
标签.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li{padding:0;margin:0;} li{list-style:none;} img{max-width:100px;max-height:110px;min-width:50px;min-height:50px;}/*自定义最大和最小宽高来控制图片*/ .a li{float:left; margin-right:13px;} .a li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:14px; text-align:center; vertical-align:middle;} .a li div img{vertical-align:middle;} </style> </head> <body> <ul class="a"> <li> <div><img src="1.jpg" /></div> </li> <li> <div><img src="a.jpg" /></div> </li> <li> <div><img src="aa.jpg" /></div> </li> </ul> </body> </html>
总结:可用于多图片上传,既不影响布局,有不用担心图片等宽高比 。
二,内联元素垂直居中之文字(非p标签):
注意:里面用来定位来做水平居中:因为.par用了display:table-cell属性,所以margin就没有用了,故而用padding和定位来达到满意位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .a{position:relative;} .par{position:absolute;left:50%;margin-left:-169px;border:4px solid #beceeb;display:table-cell; vertical-align:middle;padding:20px;} .par span{display:inline-block;vertical-align:middle;line-height:100px;border:1px solid red;} </style> </head> <body> <div class="a"> <div class="par"> <span>浪费的肌肤雷电交加了房间封疆大吏风景</span><br> <span>浪费的肌肤雷电交加了房间封疆大吏风景</span><br> <span>浪费的肌肤雷电交加了房间封疆大吏风景</span> </div> </div> </body> </html>
三,如果是p段落标签,直接用line-height,就能让文字很好的上下居中。
四,少量单纯的父子集的居中,简单来说就是用定位了。
总结:需求改变方法,秉承高效,简洁,优化,兼容,选择合适的属性。
参考:
http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html#zhangxinxu
http://www.zhangxinxu.com/wordpress/2010/10/我所知道的几种displaytable-cell的应用/
http://www.cnblogs.com/zhangxiongcn/p/6028633.html
只有在泥泞的道路上才能留下脚印