CODEWITHSUNDEEP
htmlcssvertical-alignmentalignment
HelpNeeder
HelpNeeder

Reputation: 6490

Vertical align breaks my centered div?

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.

Upvotes: 0

Views: 323

Answers (5)

Barry Poore
Barry Poore

Reputation: 69

I've had this issue and after wasted time on faffing about I finally found the obvious simple fix.

If you apply 'display:table-cell' to an element, apply 'display:table' to the parent, this will make vertical aligning work the way you expect it to.

Upvotes: 1

smang
smang

Reputation: 1207

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>

Upvotes: 1

MayTheSchwartzBeWithYou
MayTheSchwartzBeWithYou

Reputation: 1177

vertical-align: middle

I think you forgot a ';' on this. Also give 2~3px space 30-27 or 33-30

Upvotes: 1

atrepp
atrepp

Reputation: 2122

if you add text-align:center; to #page_bar ?

Upvotes: 1

mash
mash

Reputation: 15229

This will be centered vertically and horizontally:

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

Upvotes: 1

Related Questions