css - 表格单元格 div 的左/边距左值

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 移动到左边/左边距。由于 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 display)并将 JS 应用于该 div。

Answer 1

使用 inline-block 而不是 table-cell :demo

#main 只是包装器，它不会造成伤害。浏览器支持类似:inline-block , table-cell .

对于 IE<8 支持，添加:

*zoom: 1;
*display: inline;