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

我知道這裏已經有很多問題了，但沒有一個解決方案實際適用於我的特殊情況。這是佈局的樣子，而不對垂直居中任何修復：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

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

回答

相關問題