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

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

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

[關閉]
北京pk赛车历史 帝皇彩票苹果 河北十一选五 广东26选5开奖 爱彩乐彩app苹果版 网购软件靠什么赚钱 2018投资厂房工地能赚钱吗 新疆十一选五 七乐彩走势图2元网 20选5中奖率 湖南快乐10分 广西快乐十分开将结果50 如何靠桌游赚钱 广东十一选五助手软件下载 福彩快3下载湖北 我有什么能赚钱的游戏 188篮球即时比分