保证金0自动无法在带有display:table单元格的div中工作 [英] Margin 0 auto not work in div with display:table cell

问题描述

我在页面上工作..其中margin 0自动无法在带有display:table cell
的div中工作 这是我的代码

CSS样式

Im working on a page.. where Margin 0 auto not work in div with display:table cell
here's my code

CSS Styles

<style>
    html,body{
        height:100%;
        width:100%;
    }
    .wrapper{
        background-color:#999;
        height:500px;
    }
    .tableContent{
        display:table;
        height:500px;
    }

    .tableContentRow{
        display:table-row;
    }

    .tableContentCell{
        display:table-cell;
        vertical-align:middle;
        height:500px;
    }

    .loginBox{
        height:100px;
        background-color:#FFF;
        width:250px;
        margin:0 auto;
    }
</style>

这是HTML

<div class="wrapper">
    <div class="tableContent">
        <div class="tableContentRow">
            <div class="tableContentCell">
                <div class="loginBox">
                     <!-- More contents Go HEre -->
                </div>
            </div>
        </div>
    </div>
</div>    

loginBox div不在表ContentCell div的中心
请帮助...

The loginBox div does not position to the center of the tableContentCell div
Please help...

推荐答案

表本身未居中. 选中此小提琴.

The table itself is not centered. Check this fiddle.

.tableContent{
    margin:0 auto;
}

这篇关于保证金0自动无法在带有display:table单元格的div中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！