垂直居中
Posted 最爱小虾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了垂直居中相关的知识，希望对你有一定的参考价值。
一，内联元素的垂直居中之图片
查了多方资料，最终觉得淘宝工程师的做法更能满足我的需求，于是把它记录在此：
铺垫：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
以上是关于垂直居中的主要内容，如果未能解决你的问题，请参考以下文章
android 代码中设置控件的垂直居中和两个控件之间的距离。