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

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

发布时间:2019-11-09   编辑:www.jquerycn.cn
jquery中文网为您提供DIV CSS实现内容垂直居中的一个例子等资源,欢迎您收藏本站,我们将为您提供最新的DIV CSS实现内容垂直居中的一个例子资源
<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>

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

您可能感兴趣的文章:
css3内容垂直居中及垂直滚动条例子
DIV CSS布局中的居中问题
css中文字图片背景图居中的方法汇总
学习网页技巧:css布局中的居中问题
DIV实现input输入框垂直居中示例(兼容IE8、Firefox、Safari)
css 文字垂直居中实现方法总结
Css实现图片垂直上下左右居中显示
css实现在div水平垂直居中与图片水平居中的效果
css3实现图片在容器中等比例缩放及水平垂直居中
基于jQuery实现的水平和垂直居中的div窗口

[关闭]