table-cell div的left / margin-left值

Question

我有这个HTML：

<div id="main">
   //contents
</div>

和这个css：

#main {
   padding:10px;
   margin-top:5px;
   display:table-cell;
   font-family:Calibri;
   font-size:25px;
   background-color:#50aafb;
}

我有javascript计算将main div移动到左/ margin-left的程度。由于display:table-cell，div不会移动，但我还需要其他东西......

我如何解决此问题？

更新：http://jsfiddle.net/yueCM/

更新2： 使用Javascript：

$(window).load(function() {
   var l = ( $(document).width() - $('#main').width() ) / 2;
   $('#main').animate({marginLeft:l}, 200); 
});

解决方案（对我而言）： 将table-cell更改为table。

解决方案（由@ Sparky672发现）： https://stackoverflow.com/a/2986792/594235

将table-cell div包装在另一个div中（例如显示block）并将JS应用于该div。

Answer 1

使用inline-block代替table-cell：demo

#main只是包装器，它不会受到伤害。浏览器支持类似：inline-block，table-cell。

对于IE＆lt; 8支持，请添加：

*zoom: 1;
*display: inline;