答案是:#box ul.games li img{vertical-align: middle;} 这行很重要哦。
- <div id="box">
- <div class="div01">
- <div class="border">
- <img src="../images/top_06.gif">
- </div>
- <ul class="content01 black">
- <li class="clearfix">
- <ul class="gtype">
- <strong>
- 角色扮演:
- </strong>
- </ul>
- <ul class="games clearfix">
- <li>
- <img src="./images/smallgameicon/game_70.png">
- <a href="#" target="_blank">
- 无上神兵
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_72.png">
- <a href="#" target="_blank">
- 九鼎记
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_23.png">
- <a href="#" target="_blank" style="color:#f00;">
- 神仙道
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_56.png">
- <a href="#" target="_blank">
- 女神联盟
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_39.png">
- <a href="#" target="_blank">
- 三国演义
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_71.png">
- <a href="#" target="_blank">
- 热血街机
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_65.png">
- <a href="#" target="_blank">
- 热血屠龙
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_64.png">
- <a href="#" target="_blank">
- 魅影传说
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_25.png">
- <a href="#" target="_blank">
- 盛世三国
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_32.png">
- <a href="#" target="_blank">
- 瑞星龙将
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_34.png">
- <a href="#" target="_blank">
- 梦幻飞仙
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_63.png">
- <a href="#" target="_blank">
- 深渊
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_36.png">
- <a href="#" target="_blank">
- 热血海贼王
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_40.png">
- <a href="#" target="_blank">
- 开天辟地
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_42.png">
- <a href="#" target="_blank">
- 秦美人
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_16.jpg">
- <a href="#" target="_blank">
- 凡人修真
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_43.png">
- <a href="#" target="_blank">
- 大侠传
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_58.png">
- <a href="#" target="_blank">
- 剑影
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_41.png">
- <a href="#" target="_blank">
- 仙落凡尘
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_66.png">
- <a href="#" target="_blank">
- 雷霆之怒
- </a>
- </li>
- </ul>
- </li>
- <li class="clearfix">
- <ul class="gtype">
- <strong>
- 战争策略:
- </strong>
- </ul>
- <ul class="games clearfix">
- <li>
- <img src="./images/smallgameicon/game_70.png">
- <a href="#" target="_blank">
- 无上神兵
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_72.png">
- <a href="#" target="_blank">
- 九鼎记
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_23.png">
- <a href="#" target="_blank" style="color:#f00;">
- 神仙道
- </a>
- </li>
- </ul>
- </li>
- <li class="clearfix">
- <ul class="gtype">
- <strong>
- 休闲竞技:
- </strong>
- </ul>
- <ul class="games clearfix">
- <li>
- <img src="./images/smallgameicon/game_70.png">
- <a href="#" target="_blank">
- 无上神兵
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_72.png">
- <a href="#" target="_blank">
- 九鼎记
- </a>
- </li>
- <li>
- <img src="./images/smallgameicon/game_23.png">
- <a href="#" target="_blank" style="color:#f00;">
- 神仙道
- </a>
- </li>
- </ul>
- </li>
- </ul>
- <div class="border">
- <img src="../images/top_07.gif">
- </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;
- }
来源: http://www.bubuko.com/infodetail-1987466.html