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

vertical-align：middle

我想你忘记了';'就此而言。同时给出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'应用于父级，这会使垂直对齐方式按预期方式工作到。

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

5 个答案: