0

我知道已经有很多关于此的问题，但没有一个解决方案真正适用于我的特定情况。这是没有任何垂直居中修复的布局的样子：http: //jsfiddle.net/4FsKG/9/

这是tr#toolBar：height和line-height设置为2.25em：http://jsfiddle.net/4FsKG/10/。这会使除页码周围的边框之外的所有内容居中，从而导致您可以在左侧边框下轻松注意到的间隙。此外，边框占据了单元格的整个高度，而不是像预期的那样围绕数字。

我已经尝试了许多其他解决方案来解决这个问题，但所有这些最终都是我已经展示的两个示例的一些变体。

我希望该行中的所有内容都垂直居中，同时允许我在诸如页码之类的内容周围设置边框。有人有想法么？

我的示例的 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-blockwith替换浮点数vertical-align:middle就可以了：http: //jsfiddle.net/4FsKG/42/

_display: inline; zoom:1;但是如果你想支持 IE7 及以下版本，也不要忘记添加。

于 2012-10-24T23:02:32.293 回答