为啥oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto'; 有效果，但不居中

为啥oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto'; 有效果，但是不居中

撤掉margin:0 auto  结果会更加偏左

但加上后，稍微向右移，但不居中

而且显示6，但实际只有5列

---------------------css代码------------------------

*{margin:0;

  padding:0;}

  #main{position:relative;}

  .box{padding:15px 0 0 15px;

  float:left;}

  .pic{padding:10px;

  border:1px solid #CCC;

  border-radius:5px;

  box-shadow:0 0 5px #CCC;}

  .pic img{width:165px;

  height:auto;}

---------------------script代码----------------------

window.onload=function(){

waterfall("main","box");

}

function waterfall(parent,box){

//将mian下的所有class为box的元素取出来

var oParent=document.getElementById(parent);

var oBoxs=getByClass(oParent,box);

//计算整个页面显示的页数（页面宽/box的宽）

var oBoxW=oBoxs[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

//设置Main的宽

// oParent.style.cssText="width:"+oBoxW*cols+"px; margin:0 auto";//margin:0 auto

console.log("123");

oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';

}

//根据Class获取元素

function getByClass(parent,clsName){

var boxArr=new Array(), //用来存储获取到的class为box的元素

oElements=parent.getElementsByTagName("*");

for(var i=0;i<oElements.length;i++){

if(oElements[i].className==clsName){

boxArr.push(oElements[i]);

}

}

return boxArr;

}

---------------------html代码-----------------------

window.onload=function(){

waterfall("main","box");

}

function waterfall(parent,box){

//将mian下的所有class为box的元素取出来

var oParent=document.getElementById(parent);

var oBoxs=getByClass(oParent,box);

//计算整个页面显示的页数（页面宽/box的宽）

var oBoxW=oBoxs[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

//设置Main的宽

// oParent.style.cssText="width:"+oBoxW*cols+"px; margin:0 auto";//margin:0 auto

console.log("123");

oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';

}

//根据Class获取元素

function getByClass(parent,clsName){

var boxArr=new Array(), //用来存储获取到的class为box的元素

oElements=parent.getElementsByTagName("*");

for(var i=0;i<oElements.length;i++){

if(oElements[i].className==clsName){

boxArr.push(oElements[i]);

}

}

return boxArr;

}