内容垂直居中

效果如下：

测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容

 

HTML代码如下：”

<div class="holder">
    <!--[if IE]><span class="edge"></span>
    <![endif]-->
    <!--[if IE]><span class="container"><![endif]--><img src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" alt="Homework" title="Homework">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span>
    <![endif]-->
</div>

CSS如下：”

/* @reset */
body{background-color:#FFFFFF;}

/* ==== demo ==== */
.holder {
    740px;
    height:200px;
    border:1px solid #777;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
/*以下样式针对IE*/
 .edge {
    0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.container {
    vertical-align:middle;
    display:inline-block;
}

HTML中IE条件注解部分的标签要用内联对象标签。

<!--[if IE]><span class="edge"></span><![endif]-->

要放在内容之前。如果放在之后，内容是中文时会不能居中。