CSS vertical-align property doesn't work

Question

Hey there I have the following CSS code:

.parent
{
    position : 'absolute';
    top : '50px';
    left : '50px';
    width : '400px';
    height : '160px';
    padding : '10px';
    border : '2px solid';
    border-color : '#444444';
    background-color : '#FF0000';
    text-align : 'center';
    /*display : inline; tried this also and didn't work.*/
}

.child
{
    color : '#123456';
    font-size : '16px';
    font-family : 'Arial';
    vertical-align : 'middle';
}

I just want to put the child's content in the center (x and y) of the parent div, but it's not working, it only shows me the text in the top side of the parent element. Any suggestion? thank you.

Answer 1

vertical-align has a deceiving name. It doesn't actually vertically align elements in the way that you think it does.

If your child has only one line of text, you can use the line-height trick to center it:

.parent {
    line-height: 160px; /* Height of the parent */
}

Demo: http://jsfiddle.net/vVAdZ/

Another way is to fake a table:

.parent {
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

Demo: http://jsfiddle.net/vVAdZ/3/