表格单元格
行内块（inline-block）
第一个比较好理解，第二个很多人可能会忽略。比如，很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign=”absmiddle”别无他法。记住，默认下图片就是属于inline-block，你只需简单的img {vertical-align:middle;}即可。
那么，我们进入主题。现在我们由于某些特殊需要两个并排的div想实现垂直居中。如前所述，div非表格，但是当代的浏览器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那么我们就用两种方式为当代浏览器实现非表格的垂直居中，殊途同归。
HTML如下：
<div id="div1">blahblablablablablablablablablablablablablah...看见我居中了吗？</div> <div id="div2"> <p>blah blah...</p> <p>blah blah...</p> </div>
CSS如下：
#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;
width:100px; border:1px solid #009900;}
我们来重点分析CSS。如您所知，*property是一个只有IE（包括IE7）才能解析的hack. 那么为何是inline而不是inline-block呢？这跟IE的变态工作方式有关，具体不深究。在此你只需知道加上zoom:1后，就等价于inline-block。另外，如果是a, span等非block的元素，则按正常方式display:inline-block。
例子1(主要起作用的是display:table-cell;,且不能有float。firefox无法控制单元格文字过宽的情况)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /> <title>未知高度，div垂直居中的一个跨浏览器方案</title> <style type="text/css" media="screen"> /* <![CDATA[ */ #div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle; width:100px; border:1px solid #009900;} #div1 {color:red;} /* ]]> */ </style> </head> <body> <h1>未知高度，<code>div</code>垂直居中的一个跨浏览器方案</h1> <div id="bd"> <div id="div1">blahblablablablablablablablablablablablablah...看见我居中了吗？</div> <div id="div2"> <p>blah blah...</p> <p>blah blah...</p> </div> </div> </body> </html>
例子2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <style> *{ margin:0; padding:0; } .tbl{ overflow: hidden; float:left; width:399px; /* 496=150×2+80×2+4×2×4+1×4 */ margin-left:10px; margin-top:10px; border-left:#B0B9D1 solid 1px; border-bottom:#B0B9D1 solid 1px; } .tbl ul { clear:both; list-style-type:none; } .tbl li { float:left; word-wrap:break-word; overflow: hidden; text-align:center; padding:6px 4px 6px 4px; border-right:#B0B9D1 solid 1px; border-top:#B0B9D1 solid 1px; padding-bottom:32767px; margin-bottom:-32761px; } /**/ .li1{width:40px;background:#EAE2EA;} .li2{width:75px;background:#FFF;} /* 398=150×2+80+4×2×2+1×2 */ </style></head> <body> <div>css2 高度自适应表格</div> <div> <ul> <li>标题标题标题标题</li> <li>信息信息信息信息</li> <li>标题标题标题标题</li> <li>信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息</li> <li>标题标题标题标题</li> <li>mysqlmysqlmysqlmysq lmysqlmysqlmysqlmysqlmysqlmysqlmysqlmysql</li> </ul> <ul> <li>标题</li> <li>信息</li> <li>标题</li> <li>信息</li> <li>标题</li> <li>信息</li> </ul> </div> </body></html>