Test code:
<!DOCTYPE HTML><HTML><Head> <style>. DD{Background-color:Gray;position:relative;Line-height:120px; }. D1{font-size:120px; }. D2{font-size:80px; }. D3{font-size:40px; }. d4{font-size:0px; }Div{float: Left; }Div + div{margin:0px 5px; } </style> </Head><Body> <Divclass= "dd D1"> <imgstyle= "Height:60px;width:100px;background-color:red;vertical-align:middle"> </Div> <Divclass= "dd D2"> <imgstyle= "Height:60px;width:100px;background-color:red;vertical-align:middle"> </Div> <Divclass= "dd D3"> <imgstyle= "Height:60px;width:100px;background-color:red;vertical-align:middle"> </Div> <Divclass= "dd D4"> <imgstyle= "Height:60px;width:100px;background-color:red;vertical-align:middle"> </Div></Body></HTML>
Found no, with font-size relationship is very big,vertical-align:middle principle is:
So the smaller the font-size, the closer the alignment line is to the middle line of the Div.
Vertical-align:middle Properties See
Vertical-align each attribute comparison
A graph that resolves how to align img vertically