html - 垂直对齐打破了我居中的 div？

Question

当我尝试垂直对齐居中的内部 DIV 时，我的居中不起作用...

我的问题是什么？

CSS 代码:

#page_bar
{
    width: 100%;
    height: 30px;
    background-color: white
}

.page_bar
{
    width: 800px;
    height: 30px;
    display: table-cell;
    vertical-align: middle
}

HTML代码:

<div id="page_bar">
    <div class="page_bar">
        Mapa Strony
    </div>
</div>

编辑:我希望内部 DIV 居中，而不是内部 DIV 中的文本...

编辑:看:http://mistic-miners.comule.com/index.html银色区域必须居中，这意味着内部 div 必须居中，而不是内部 div 内的文本。

Answer 1

看起来您可能需要包装 .page_bar 类，以使其与表格单元格显示水平居中。

#wrap{
    margin: 0px auto;
    display:table;
}

#page_bar
{
    width: 100%;
    height: 30px;
    background-color: white
}

.page_bar
{
    width: 800px;
    height: 30px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    margin: 0px auto;
}

<div id="page_bar">
    <div id="wrap">
        <div class="page_bar">
            Mapa Strony
        </div>
    </div>
</div>