zl程序教程

您现在的位置是:首页 > 

当前栏目

内容垂直居中

内容 居中 垂直
2023-06-13 09:11:17 时间

内容垂直居中

Ghostzhang 发表于 2007-01-22 20:14

在CSSPlay上看到了一个垂直居中的例子,感觉还是不错的,跟大家分享一下:

  • Result

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

  • 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 {
    width:740px;
    height:200px;
    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中IE条件注解部分的标签要用内联对象标签。

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

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