如何垂直居中放置此内容？

我知道这里已经有很多问题了，但没有一个解决方案实际适用于我的特殊情况。这是布局的样子，而不对垂直居中任何修复：http://jsfiddle.net/4FsKG/9/如何垂直居中放置此内容？

这是TR＃工具栏：高度和的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; 
}

来源

2012-10-24 Kittoes0124

你有没有试过这样做没有表？ – Jason

@Jason我没有。我考虑将这些部分移出表格，但那会有一个很大的缺点：我必须明确定义我的表格宽度。 – Kittoes0124

问题是你的页码在顶部和底部有一个边框，但是你那一行的其他元素没有。 – Jason

只是display:inline-block与vertical-align:middle代替花车，并且将这样的伎俩：http://jsfiddle.net/4FsKG/42/

但是，如果你想支持别忘了还加_display: inline; zoom:1; IE7及以下。

来源

2012-10-24 23:02:32 gkond

如果我想将长度/信息元素放置在左侧，并将筛选器/分页元素放置在右侧，该怎么办？它也看起来像info元素旁边的边框不占用表格行的整个高度。 – Kittoes0124

然后坚持你的第二个选项（高度+行高），只需添加包装数字来获得正确的边框：http://jsfiddle.net/4FsKG/43/ – gkond

我其实已经找到了一个解决方案。我只需将该行的行高设置为我的值，然后将链接的行高设置为无，并且完美地工作。既然你的答案/解决方案会让我走上正轨，反正我会接受它。请添加额外的细节。 – Kittoes0124

如何垂直居中放置此内容？

回答

相关问题