Question

When I try to vertical align centered inner DIV my centering isn’t working…

What’s my problem here?

CSS Code:

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

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

HTML Code:

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

EDIT: I want inner DIV to be centered, not the text in inner DIV…

EDIT: Look at: http://mistic-miners.comule.com/index.html the silver area must be centered which means the inner div must be centered not the text inside of inner div.

Answer 1

It looks like you may need to wrap the .page_bar class in order to get it to center horizontally with the table-cell display.

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