我有一个 4x3 的 HTML 表格，里面有图标。这个表格上方有一个标题。如果你仔细观察，你会发现标题相对于表格的垂直中心略微偏右..
JSFiddle: http://jsfiddle.net/ahmadka/Mufvw/
注意:我在此处提到的代码是网页较大页 footer 分的一部分。所以不要做太大的改变，否则解决方案可能与原始页面不兼容。
这是出现此内容的原始页面(在页脚中): 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>
最佳答案
向两个元素添加一个类“tableDisplay”，然后更改显示类型:
.tableDisplay{ display: table-row; }
这是更新后的 fiddle :http://jsfiddle.net/Mufvw/3/
关于html - 标题相对于表格未正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17421277/