垂直对齐会破坏我的居中 div？答案

【问题标题】：Vertical align breaks my centered div?垂直对齐会破坏我的居中 div？
【发布时间】：2014-10-07 17:05:16
【问题描述】：

当我尝试垂直对齐居中的内部 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 内的文本。

【问题讨论】：

标签： html css vertical-alignment alignment

【解决方案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>

【讨论】：

这正是我需要的！这和你上面的例子一样吗？我试过了，但没有用...：P 谢谢！
我使用了上面示例中的代码，但看起来发布的网站上的代码存在一些其他问题，这些问题干扰了上面的代码。我对 JsFiddle 中的代码做了一些调整，希望它对你有用。

【解决方案2】：

这将垂直和水平居中：

#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/

【讨论】：

【解决方案3】：

如果您将text-align:center; 添加到#page_bar ？

【讨论】：

您忘记将; 添加到background-color: white
每个样式的最后一个设置不需要关闭';'因为设置后有'}'。

【解决方案4】：

垂直对齐：中间

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

【讨论】：

【解决方案5】：

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

如果您将'display:table-cell' 应用于元素，则将'display:table' 应用于父级，这将使垂直对齐按您预期的方式工作。 p>

【讨论】：