我有一个4x3的HTML表格，里面有图标..这个表格上面有一个标题..如果仔细观察，你会注意到标题相对于表格的垂直中心略微向右..
JSFiddle： http://jsfiddle.net/ahmadka/Mufvw/
注意：我在这里提到的代码是网页较大页脚部分的一部分。所以不要做太大的改动，因为那时解决方案可能与原始页面不兼容。
以下是显示此内容的原始页面（在页脚中）： http://bit.ly/12hny0I
HTML代码：
<body bgcolor="#000000">
<div class="footer_wrap">
<div class="footer_bg">
<div class="blog_Sec">
<!--blog_nav-->
<div class="partners1" style="margin-top:-10px">
<span class="heading">Payment Partners</span>
<table>
<tbody>
<tr align="center">
<td align="center">
<a class="tiptip" href=
"http://www.moneybookers.com" target="_blank"
title="Moneybookers/Skrill"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/moneybookers.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/moneybookers.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/moneybookers.png"></a>
</td>
<td align="center">
<a class="tiptip" href=
"http://www.2checkout.com" target="_blank"
title="2Checkout"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/2checkout.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/2checkout.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/2checkout.png"></a>
</td>
<td align="center" style="padding-bottom: 4px;">
<a class="tiptip" href="http://www.visa.com"
target="_blank" title="VISA"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/visa.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/visa.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/visa.png"></a>
</td>
<td align="center">
<a class="tiptip" href=
"http://www.mastercard.com" target="_blank"
title="MasterCard"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/mastercard.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/mastercard.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/mastercard.png"></a>
</td>
</tr>
<tr align="center">
<td align="center">
<a class="tiptip" href=
"http://www.ubldirect.com/corporate/bankingservices/omni/home.aspx"
target="_blank" title=
"UBL Omni"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/omni.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/omni.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/omni.png"></a>
</td>
<td align="center">
<a class="tiptip" href=
"http://www.easypaisa.com.pk" target="_blank"
title="EasyPaisa"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/easypaisa.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/easypaisa.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/easypaisa.png"></a>
</td>
<td align="center">
<a class="tiptip" href="http://www.hbl.com"
target="_blank" title=
"Habib Bank Limited"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/hbl.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/hbl.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/hbl.png"></a>
</td>
<td align="center">
<a class="tiptip" href=
"http://www.standardchartered.com.pk" target=
"_blank" title=
"Standard Chartered Pakistan"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/scb.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/scb.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/scb.png"></a>
</td>
</tr>
<tr align="center">
<td align="center">
<a class="tiptip" href="http://www.abl.com"
target="_blank" title=
"Allied Bank Limited"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/abl.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/abl.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/abl.png"></a>
</td>
<td align="center">
<a class="tiptip" href=
"http://www.faysalbank.com" target="_blank"
title="Faysal Bank Limited"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/faysal.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/faysal.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/faysal.png"></a>
</td>
<td align="center">
<a class="tiptip" href=
"http://www.bankalfalah.com" target="_blank"
title="Bank Alfalah"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/alfalah.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/alfalah.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/alfalah.png"></a>
</td>
<td align="center">
<a class="tiptip" href=
"http://www.ubldirect.com" target="_blank"
title="United Bank Limited"><img onmouseout=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/ubl.png'"
onmouseover=
"this.src='http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/ubl.png'"
src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/normal/ubl.png"></a>
</td>
</tr>
</tbody>
</table>
</div>
<div style="display:none">
<table>
<tbody>
<tr>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/moneybookers.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/2checkout.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/visa.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/mastercard.png"></td>
</tr>
<tr>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/omni.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/easypaisa.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/hbl.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/scb.png"></td>
</tr>
<tr>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/abl.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/faysal.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/alfalah.png"></td>
<td><img src=
"http://173.254.28.69/~bluraysp/image/data/paymenticons/hover/ubl.png"></td>
</tr>
</tbody>
</table><img src="http://173.254.28.69/~bluraysp/image/data/socialicons/hover/f_logo.png">
<img src="http://173.254.28.69/~bluraysp/image/data/socialicons/hover/t_logo.png"> <img src=
"http://173.254.28.69/~bluraysp/image/data/socialicons/hover/g_logo.png"> <img src=
"http://173.254.28.69/~bluraysp/image/data/socialicons/hover/r_logo.png"></div>
</div><!--blog_Sec End-->
</div>
</div>
</body>
答案 0 :(得分：0)
向两个元素添加一个类'tableDisplay'，然后更改显示类型：
.tableDisplay{ display: table-row; }
这是更新的小提琴：http://jsfiddle.net/Mufvw/3/