html - 如何制作一个以两侧空白为中心的固定流体表？

Question

我做了一个 JS fiddle，让它在 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;

这是 FireFox 中的基本居中；

.sticky-container {
 text-align: -moz-center;
 width: 100%;   
 position: fixed;   
}

  .sticky {
position: relative;
width: 100px;
z-index: 120;    

}