html - 我怎样才能垂直居中这个内容？

Question

我知道已经有很多关于此的问题，但没有一个解决方案真正适用于我的特定情况。这是没有任何垂直居中修复的布局的样子: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;
}

Answer 1

只需用 display:inline-block 和 vertical-align:middle 替换 float 即可:http://jsfiddle.net/4FsKG/42/

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