垂直居中似乎一直困惑着众多的重构设计师,这是CSSPlay网站给出了一个方案。
======================CSS=======================.holder{ width:740px; height:300px; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}/*以下样式针对IE*/.edge{ width:0; height:100%; display:inline-block; vertical-align:middle;}.container{ vertical-align:middle; display:inline-block;}================================================
====================HTML=======================<div class="holder"><!--[if IE]><span class="edge"></span><![endif]--><!--[if IE]><span class="container"><![endif]--><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="Homework" title="Homework" />
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span><![endif]--></div>=================================================
代码改动了一点点。有两点必须要注意的:
HTML中IE条件注解部分的标签要用内联对象标签。 “<!--[if IE]><span class="edge"></span><![endif]-->”要放在内容之前。如果放在之后,内容是中文时会不能居中。