How HTML CSS Aligns the IMG and a tags in the middle of an inline element

The answer is: #box ul.games Li Img{vertical-align:middle, this line is very important.

<div id= "box" > <div class= "div01" > <div class= "Border" ></div> <ul class=" content01 black "><li class=" Clearfix "><ul class=" Gtyp E "><strong>   RPG: </strong></ul><ul class=" Games Clearfix "><li>< IMG src= "./images/smallgameicon/game_70.png" ><a href= "#" target= "_blank" > No god Soldier </a></li><li ><a href= "#" target= "_blank" > Jiuding kee </a></li ><li><a href= "#" target= "_blank" style= "color: #f00 ;" > Fairy Road </a></li><li><a href= "#" target= " _blank "> Goddess League </a></li><li><a href=" # " target= "_blank" > Kingdoms </a></li><li><a href= "#" target= "_blank" > Hot-blooded Arcade </a></li><li><a href= "#" target= "_blank" > Blood dragon Slayer </a></li><li><a href=" # "target=" _blank "> Phantom legends </a></li><li><a href=" # "target=" _blank "> Prosperous Three Kingdoms </a></li><li><a href=" # "target=" _blank "> Rising dragon </a></li><li>< IMG src= "./images/smallgameicon/game_34.png" ><a href= "#" target= "_blank" > Fantasy Flying Fairy </a></li><li ><a href= "#" target= "_blank" > Abyss </a></li> <li><a href= "#" target= "_blank" > Hot-blooded Pirate King </a> </li><li><a href= "#" target= "_blank" > Epoch & Lt;/a></li><li><a href= "#" target= "_blank" > Qinmei </a></li><li><a href= "#" target= " _blank "> Mortal </a></li><li><a href=" # " target= "_blank" > Hero Biography </a></li><li><a href= "#" target= "_blank" > Sword Shadow </a></li><li><a href= "#" target= "_blank" > Fairy Fall Midgard </a></li><li><a href=" # "target=" _blank "> Thunder Fury </a></li></ul></li><li class=" Clearfix "><ul class=" Gtype "><strong>   War strategy: </strong></ul><ul class=" Games Clearfix "><li><a href=" # "target=" _blank " > No</a></li><li><a href= "#" target= "_ Blank "> Jiuding </a></li><li><a href=" # " target= "_blank" style= "color: #f00;" > Fairy Road </a></li></ul></li><li class= "Clearfix" ><ul class= "Gtype" ><strong >   Recreation: </strong></ul><ul class= "Games clearfix" ><li><a href=" # "target=" _blank "> No upper Divine Soldier </a></li><li><a href=" # "target=" _blank "> Jiuding kee </a></li><li>< IMG src= "./images/smallgameicon/game_23.png" ><a href= "#" target= "_blank" style= "color: #f00;" > Fairy Road </a></li></ul></li> </ul> <div class= "border" ></div></div></div>

　　

. TOP_BJ{width:100%;Height:36px;Overflow:Hidden;background:URL (.. /images/top_bj.gif);}. Top_content{width:100%;margin:0px Auto;Height:36px;Overflow:Hidden;}. Top_logo{width:170px;float: Left;}. All_icon{float: Left;padding:7px;width:16px;Height:16px;Overflow:Hidden;}. All_black,.all_black a:link,.all_black a:visited{font-size:12px;Line-height:30px;Font-weight:Normal;Color:#595959;text-decoration:None;font-family:Arial, Helvetica, Sans-serif;}. All_black a:hover{font-size:12px;Line-height:30px;Font-weight:Normal;Color:#0e6cb0;text-decoration:None;font-family:Arial, Helvetica, Sans-serif;}. Black,.black a:link,.black a:visited{font-size:12px;Line-height:36px;Font-weight:Normal;Color:#464646;text-decoration:None;font-family:Arial, Helvetica, Sans-serif;}. Black A:hover{font-size:12px;Line-height:36px;Font-weight:Normal;Color:#03C;text-decoration:None;font-family:Arial, Helvetica, Sans-serif;}. red,.red a:link,.red a:visited{font-size:12px;Line-height:36px;Font-weight:Normal;Color:#F00;text-decoration:None;font-family:Arial, Helvetica, Sans-serif;}. Red A:hover{font-size:12px;Line-height:36px;Font-weight:Normal;Color:#03C;text-decoration:None;font-family:Arial, Helvetica, Sans-serif;}#box{Display:None;width:593px;float: Right;Overflow:Hidden;margin:0px Auto;Padding-right:100px;}#box. Div01{width:593px;Overflow:Hidden;position:Absolute;Z-index:999;Top:30px;}#box. div01. Border{width:100%;Overflow:Hidden;}#box ul.content01{width:591px;background:#FFF;Overflow:Hidden;Border:Solid 1px #9c9c9c;Border-bottom:None;Border-top:None;List-style:None;}#box Ul.gtype{float: Left;width:80px;}#box ul.games{float: Left;width:509px;}#box ul.games Li{float: Left;width:100px;}#box ul.games li img{vertical-align:Middle;}#box Ul.games Li a{Padding-left:5px;}

How HTML CSS Aligns the IMG and a tags in the middle of an inline element