Question

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

这是 tr＃toolBar ：高度，行高设置为 2.25em ：{{ 3}}。这会使所有内容居中，但是我的页码周围的边框会产生一个间隙，您可以在左边的边框下轻松注意到这个间隙。此外，边界占据了单元格的整个高度，而不是仅仅围绕预期的数字。

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

我希望行中的所有内容都垂直居中，同时允许我在页面数字之类的边框周围放置边框。有人有什么想法吗？

我的例子的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;
}

Answer 1

只需将display:inline-block的浮点数替换为vertical-align:middle，这样就可以解决问题：http://jsfiddle.net/4FsKG/42/

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

我如何垂直居中这个内容？

1 个答案: