消除图片长\宽大于容器,一边长一边宽,小于容器
在ff,ie里都通过
这里是js代码:

position:fixed;top:0;right:0;left:0;bottom:0;margin:auto; 

运用margin-left:auto;margin-right:auto;
能够让您的div居中对齐。
.style{margin-left:auto;margin-right:auto;}
缩写形式为:
.style{margin:0 auto;}
数字0 表示上上边距是0。能够坚守须求设置成不相同的值。

复制代码 代码如下:

翻开下边包车型地铁事例:

<HTML>
 <HEAD>
  <TITLE> 脚本之家 www.jb51.net New Document </TITLE>
  <META NAME=”Generator” CONTENT=”EditPlus”>
  <META NAME=”Author” CONTENT=””>
  <META NAME=”Keywords” CONTENT=””>
  <META NAME=”Description” CONTENT=””>
  <style type=”text/css”>
*{margin:0px; padding:0px; font-size:12px;  }
body{ font-size:0.8em; color: #333;}
ul{ list-style:none}
.clear:after {
    content: “.”; 
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;}
img{border:0px;}
.clear1{    clear: both; width: 100%; height: 1px; overflow: hidden;}
a{ text-decoration: none; color:#404040 }
body{ background:#f7f3d0 url(../images/bg.jpg) repeat-x left 210px;}
/**/
#pic{border:1px solid #000; width:800px; height:auto!important;height:300px; min-height:300px;background:#ca88娱乐唯一官网:底部对齐,div在另一个div居中对齐。fff}
#pic dl{width:215px;height:200px; overflow: hidden;border:1px solid #000;margin:10px;float:left}
#pic dt{height:161px; width:209px;overflow:hidden;border:1px solid red;text-align:center}

运作代码无着色情势复制打印?

  </style>
 <script language=”javascript” src=”tt.js”></script>
 <script language=”javascript”>
  <!–
  imgsrc={
   vh:’161′,   //高
    vw:’209′, //宽

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;  
  2. <html xmlns=”” lang=”zh-cn”>  
  3. <head>  
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />  
  5. <title>居中div演示效果</title>  
  6. <style type=”text/css”>  
  7. .align-center{   
  8.     margin:0 auto;      /* 居中 那几个是必需的,,其余的品质非必得 */
      
  9.     width:500px;        /* 给个升幅 顶到浏览器的两侧就看不出居中效果了 */
      
  10.     background:red;     /* 背景色 */   
  11.     text-align:center;  /* 文字等内容居中 */   
  12. }   
  13. </style>  
  14. </head>  
  15.   
  16. <body>  
  17. <div class=”align-center”>居中div演示效果</div>  
  18. </body>  
  19. </html>  

    addEvent: function(elm, evType, fn, useCapture){
    if (elm.addEventListener){
        elm.addEventListener(evType, fn, useCapture);
        return true;
        } else if (elm.attachEvent) {
        var r = elm.attachEvent(‘on’ + evType, fn);
        return r;
        } else {
        elm[‘on’ + evType] = fn;
        }
    },
    init:function()
    {
        var divn=document.getElementById(“pic”)
       var dln=divn.getElementsByTagName(“dl”)
        for (var i=0;i<dln.length ;i++) {
       var dtn=dln[i].getElementsByTagName(“dt”);
       var imgn=dtn[0].getElementsByTagName(“img”);

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”” lang=”zh-cn”> <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″
/> <title>居中div演示效果</title> <style
type=”text/css”> .align-center{ margin:0 auto; /* 居中
那么些是必需的,,别的的品质非必需 */ width:500px; /* 给个升幅顶到浏览器的两侧就看不出居中成效了 */ background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */ } </style> </head>
<body> <div class=”align-center”>居中div演示效果</div>
</body> </html>

      
      if(imgn[0].height>imgsrc.vh||imgn[0].width>imgsrc.vw)
      {
         if(imgn[0].height/imgsrc.vh > imgn[0].width/imgsrc.vw)
         {
          imgn[0].heigh=imgsrc.vh
          imgn[0].width=imgsrc.vh/imgn[0].height*imgn[0].width
         }
         else
         {
          imgn[0].width=imgsrc.vw
          imgn[0].heigh=imgsrc.vw/imgn[0].width*imgn[0].heigh
         }

留神,必要加上地点的那句

      }
      if(imgsrc.vh-imgn[0].height>0)
      {
      var hh=(imgsrc.vh-imgn[0].height)/2
     imgn[0].style.margin=hh+” 0px 0px 0px”
      }

工夫奏效,即使不想要那句的话,也足以给body加多特性质:
body{text-align:center;}

     

除此以外,让div内的开始和结果(包含文字及图片)居中的代码是: text-align:center;

网站地图xml地图