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
{
    width: 100%;
    height: 100px;
    background-color: black;
    text-align: center;
}

.page_bar
{
    width: 800px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    color: white;
}​

jsfiddle：http: //jsfiddle.net/DgwwB/2/

Answer 2

如果你添加text-align:center;到#page_bar?

Answer 3

垂直对齐：中间

我想你忘了一个';' 对此。也给 2~3px 空间 30-27 或 33-30

Answer 4

看起来您可能需要包装 .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>          

Answer 5

我遇到了这个问题，在浪费时间浪费时间后，我终于找到了明显的简单解决方法。

如果你应用'display:table-cell'到一个元素，应用'display:table'到父级，这将使垂直对齐按照你期望的方式工作。