CSS vertical-align property doesn't work

css, html, text-align

Solution

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

Problem

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.

Original source