div中的img垂直居中

css方法一

Html代
  1. <style type="text/css">  
  2. <!--    
  3. * {margin:0;padding:0}   
  4. div {   
  5.   width:500px;   
  6.   height:500px;   
  7.   border:1px solid #666;   
  8.   overflow:hidden;   
  9.   position:relative;   
  10.   display:table-cell;   
  11.   text-align:center;   
  12.   vertical-align:middle   
  13. }   
  14. div p {   
  15.   position:static;   
  16.   +position:absolute;   
  17.   top:50%   
  18.   }   
  19. img {   
  20.   position:static;   
  21.   +position:relative;   
  22.   top:-50%;left:-50%;   
  23.   }   
  24. -->  
  25. </style>  
  26. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

 

 

css方法二

Html代
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. body {   
  9.   margin:0;padding:0   
  10. }   
  11. div {   
  12.   width:500px;   
  13.   height:500px;   
  14.   line-height:500px;   
  15.   border:1px solid #666;   
  16.   overflow:hidden;   
  17.   position:relative;   
  18.   text-align:center;   
  19. }   
  20. div p {   
  21.   position:static;   
  22.   +position:absolute;   
  23.   top:50%   
  24. }   
  25. img {   
  26.   position:static;   
  27.   +position:relative;   
  28.   top:-50%;left:-50%;   
  29.   vertical-align:middle   
  30. }   
  31. p:after {   
  32.   content:".";font-size:1px;   
  33.   visibility:hidden   
  34. }   
  35. -->  
  36. </style>  
  37. </head>  
  38. <body>  
  39. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  
  40. </body>  
  41. </html>  

 

 

css方法三

H
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. * {margin:0;padding:0;}   
  9. div {   
  10.   width:500px;border:1px solid #666;   
  11.   height:500px;   
  12.   background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat   
  13. }   
  14. -->  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div></div>  
  19. </body>  
  20. </html>  

 

js控制方法一：

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>未命名頁面</title>

    <script type="text/javascript">
    function setCenter(Xelement)
    {
        var parent=Xelement.parentNode;
        parent.style.position="relative";
        Xelement.style.position="absolute";
        var left=(parent.clientWidth-Xelement.clientWidth)/2;
        var top=(parent.clientHeight-Xelement.clientHeight)/2;
        Xelement.style.left=left+"px";
        Xelement.style.top=top+"px";
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div id="picbox" style="width: 200px; height: 200px; background: #ccc;">
            <img id="img1" src="images/c7.jpg" alt="" onload="setCenter(this)" />
        </div>
    </form>
</body>
</html>

 

 

posted @ 2010-12-22 13:51  你妹的sb  阅读(7591)  评论(0)  编辑  收藏  举报
百度一下