0

アイコンを格納する 4x3 の HTML テーブルがあります..このテーブルの上に見出しがあります..よく見ると、見出しがテーブルの垂直方向の中心に対してわずかに右にあることがわかります..

JSFiddle: http://jsfiddle.net/ahmadka/Mufvw/

注:ここで言及したコードは、Web ページの大きなフッター セクションの一部です。大幅な変更は行わないでください。元のページとの互換性がなくなる可能性があります。

これが表示される元のページ (フッター) は次のとおりです: 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 に答える