Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  正文 DIV CSS实现内容垂直居中的一个例子

DIV CSS实现内容垂直居中的一个例子

发布时间:2019-11-09   编辑:www.jquerycn.cn
jquery中文网为您提供DIV CSS实现内容垂直居中的一个例子等资源,欢迎您收藏本站,我们将为您提供最新的DIV CSS实现内容垂直居中的一个例子资源
<script>ec(2);</script>
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy6724')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6724>======================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]-->
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
<!--[if IE]>
</span>
<![endif]-->
</div>
</td> </tr> </table>

=================================================
代码改动了一点点。有两点必须要注意的:
HTML中IE条件注解部分的标签要用内联对象标签。
“<!--[if IE]><span class="edge"></span><![endif]-->”要放在内容之前。如果放在之后,内容是中文时会不能居中。

</td> </tr> </table>

您可能感兴趣的文章:
DIV实现input输入框垂直居中示例(兼容IE8、Firefox、Safari)
基于jQuery实现的水平和垂直居中的div窗口
jQuery的垂直Slideshow
js结合css实现图片自动等比例缩小且垂直居中的代码
js等比例缩放图片且垂直居中显示实例
CSS3中如何充分使用视窗单位来布局
jQuery的显示和隐藏方法与css隐藏的样式对比
jQuery布局插件UI Layout简介及使用方法
css浮动元素的居中的例子
jquery插件制作 图片走廊 gallery

[关闭]