Unknown size picture vertical and horizontal centering problem in a known container _css/html

In addition to the special instructions, the content of this site using Creative Commons authorized signature and non-commercial use, please respect the fruits of labor.

CSS layout, the unknown size of the vertical center of the picture, has always been a headache problem, standard browser as long as the line-height and picture of the vertical-align:middle; A few months ago on the foreign site saw a solution to IE, feeling is not very ideal, also did not take the matter. Recently saw a friend often asked a similar question, and the code turned out, for IE changed.

Css

. box{
height:140px;
width:200px;
Border:solid 1px #666;
text-align:center;/* Horizontal Center */
line-height:140px;
Font-size:126px;/*ie the vertical Center */
}
. box[class]{
font-size:12px;/* Standard browser requires this value */
}
img{
vertical-align:middle;/* Standard Browser Picture Vertical Center */
}

The original foreigner code font-size is the same height, try to lower the height of the container than the standard browser, many times to try to reduce the size of the font size of 10% container height, so it looks similar. It is unclear what the reasons are.

Tests were successful under IE5.5, IE6.0, FF1.5, Opera9.0, and were not valid for IE5.0 and IE7.0.

