Geek Answers Handbook

CSS vertical-align property not working

Hi, 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 content in the center (x and y) of the parent div, but it does not work, it only displays the text at the top of the parent element. Any suggestion? thanks.

+4
source share
3 answers

vertical-align has a misleading name. It actually does not vertically align the elements as you think.

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 faking a table:

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

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

+14
source

Lose quotes in CSS property values ​​and add line-height: 160px; in .parent

+2
source

Take any width that is 400 in this case, and divide it by 2 for half the div. Then take half the height 160 and divide by 2 half the height, and you should get the center.

+2
source

More articles:


All Articles