固定表頭彈性表-頭垂直對齊

Question

jsFiddle- https: //jsfiddle.net/24by5tmv/1/

我有一個簡單的flex表，該表可以修復標題並滾動表主體，但是我想垂直對齊每個單元格中內容（標題和主體）的中心/中間位置。

將單元格設置為vertical-align: middle; 通常可以解決問題，但是使用flexbox似乎無法垂直對齊單元格內容。

我毫不懷疑我已經忽略了某些內容，並且可能忽略了一些簡單的內容，但是有人有解決此問題的想法嗎？

非常感激 ：）

Answer 1

您還可以使th,td元素靈活，並在其中應用對齊方式：

table.flex-table tr td,
table.flex-table tr th {
  display: flex;
  flex: 1;
  align-items:center;
  justify-content:center;
}

完整代碼

 .panel-body { height: 300px; } table { border-top: 1px solid black; /* Just to Highlight Top of Table */ } table thead tr { height: 5em; /* Fixed Row Height */ } /* Flex Table */ table.flex-table { display: flex; flex-direction: column; height: 100%; } table.flex-table thead, table.flex-table tbody { display: block; } table.flex-table thead { margin-right: 0px; } table.flex-table tbody { flex: 1; overflow-y: scroll; } table.flex-table tr { width: 100%; display: flex; } table.flex-table tr td, table.flex-table tr th { display: flex; flex: 1; align-items:center; justify-content:center; } 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <br> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <table class="table table-striped flex-table"> <thead> <tr> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> </tr> </thead> <tbody> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> </tbody> </table> </div> </div> </div> </div> </div>