DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> css中不確定高度垂直居中2種方法
css中不確定高度垂直居中2種方法
編輯:布局實例     

   例子1

  不確定高度垂直居中

 代碼如下  

/* center < */
.vetically {
    vertical-align: middle;
    display: table-cell;
    *position: relative;
}
.vetically_C {
    display: block;
    margin: 0 auto;
    text-align: center;
    *position: absolute;
    *top: 50%;
    *left: 50%;
    *margin-top: expression(-(this.height ) / 2);
    *margin-left: expression(-(this.width ) / 2);
}
/* center > */

  例子2

  標准浏覽器的情況還是和上面一樣,不同的是針對IE6/IE7利用在img標簽的前面插入一對空標簽的辦法。

 代碼如下  

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>方法2 - 未知高度的圖片垂直居中</title> 
<style type="text/css"> 
body { 
height:100%; 

#box{ 
width:500px;height:400px; 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
border:1px solid #d3d3d3;background:#fff; 

#box img{ 
border:1px solid #ccc; 

</style> 
<!--[if IE]> 
<style type="text/css">? 
#box i { 
display:inline-block; 
height:100%; 
vertical-align:middle 

#box img { 
vertical-align:middle 

</style> 
<![endif]--> 
</head> 
<body> 
<div id="box"> 
<i></i><img src="images/demo_zl.png" alt="" /> 
</div> 
</body> 
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved