0

これについてはすでにたくさんの質問があることは知っていますが、私の特定の状況で実際に機能するソリューションはありません。これは、垂直方向のセンタリングを修正しない場合のレイアウトの外観です：http: //jsfiddle.net/4FsKG/9/

これは、tr＃toolBar：heightとline-heightが2.25emに設定されている場合です： http：//jsfiddle.net/4FsKG/10/。これにより、すべてが中央に配置されますが、ページ番号の周囲の境界線は、左側の境界線の下に簡単に気付くギャップになります。さらに、境界線は、意図したとおりに数字の周りにあるだけでなく、セルの高さ全体を占めます。

私はこの問題に対して他の多くの解決策を試しましたが、それらはすべて、すでに示した2つの例のバリエーションとして終わります。

ページ番号などを境界線で囲みながら、行のすべてを垂直方向の中央に配置したいと思います。誰かアイデアはありますか？

私の例のCSS：

table {
    background-color:#274F68;
    font-size:0.85em;
    white-space:nowrap;
    border-collapse:separate;
    border:1px solid #274F68;
    border-radius:6px 6px 6px 6px;
    -moz-border-radius:6px 6px 6px 6px;
    -webkit-border-radius:6px 6px 6px 6px;
}

tr#input td { border-bottom:2px solid #6189A3; }

    tr#input td form {
        float:right;        
    }

tr#toolBar { 
    font-family:Arial;
    background-color:#152939;
    color:#6189A3;
}

    tr#toolBar td { border-bottom:2px solid #6189A3; }

        tr#toolBar td a {
            padding:0;
            margin:0 3px 0 3px;
        }

.dataTables_length { float:left;}
.dataTables_info { float:left; }
.dataTables_filter { float:right; }
.dataTables_paginate { float:right; }

.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
    float:left;
    border: 1px solid #6189A3;
}
4

1 に答える 1

0

display:inline-blockfloatをwithに置き換えるだけでvertical-align:middle、うまくいきます：http: //jsfiddle.net/4FsKG/42/

_display: inline; zoom:1;ただし、IE7以下をサポートする場合は、追加することも忘れないでください。

于 2012-10-24T23:02:32.293 に答える