0

我有一个 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>
4

1 回答 1

0

向两个元素添加一个类“tableDisplay”，然后更改显示类型：

.tableDisplay{ display: table-row; }

这是更新的小提琴：http: //jsfiddle.net/Mufvw/3/

于 2013-07-02T08:59:20.527 回答