如何制作一个固定的流体桌子，两侧居中留有空位

Question

我做了一个JS小提琴，它在Chrome和Safari中正常工作：

http://jsfiddle.net/ZWvzB/

但这在 Firefox 中的工作方式并不相同。在 Firefox 中，它对齐正确。

有人知道我如何使它同时适用于Firefox和Chrome吗？ 而且... 还有..IE ？

我希望这不会让任何人失望，但要让它只在 FF 而不是 chrome 中工作，我所做的是让 .sticky 类的宽度设置为 inherit .然后它仅适用于FF和Safari。

Answer 1

这就是我会这样做的：

.CSS

.sticky
{
    position:fixed;
    top:0;
    left:31px;
    right:31px;
}
.sticky table
{
    border:1px solid blue;
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
}
.sticky table tr
{
    background:blue;
    padding:5px;
    text-align:center;
}

.HTML

<div class="sticky">
    <table>
        <tbody>
            <tr><td>Crazy Fixed Div</td></tr>
        </tbody>
    </table>
</div>

演示

Answer 2

这将涵盖 FireFox

.sticky { 
text-align: -webkit-center;    //Chrome
text-align: -moz-center;   //FireFox
text-align: center;  
position: fixed;
top: 0;
left: 0;
z-index: 120;  
padding: 0 31px;
width: 100%;    
display: inline-table;
}

您也可以使用边距自动居中，因为这可能是首选方法

   margin: auto;

这是火狐中的基本居中;

.sticky-container {
 text-align: -moz-center;
 width: 100%;   
 position: fixed;   
}
  .sticky {
position: relative;
width: 100px;
z-index: 120;    

}