Jquery中文網 www.prqmtc.live
Jquery中文網 >  CSS教程  >  正文 DIV CSS實現內容垂直居中的一個例子

DIV CSS實現內容垂直居中的一個例子

發布時間:2019-11-09   編輯:www.prqmtc.live
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

[關閉]
一分赛车计划app 陕西快乐10分 怎么入手股票 滚球指数即时指数 股票融资融券操作方法 球探体育比分wp8下载 600285股票行情实时查询 爱情三级片电影 体彩20选5 av日本女优婷婷激情片段 吉林快3 旺润配资 湖南快乐10分