将多行数据显示在一个单元格中，然后使用vertical-align，将他们自动对齐到单元格的上边，中间或下边。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .align-top{height: 200px;vertical-align:top; } 8 .align-middle{height: 200px;vertical-align: middle;} 9 .align-bottom{height: 200px;vertical-align: bottom;} 10 </style> 11 12 </head> 13 <body> 14 <h1>Verticla-aligned Data</h1> 15 <table> 16 <tr> 17 <td class="align-top">These lines of text are vertically aligned to the top of the cell</td> 18 <td class="align-middle">These lines of text are vertically aligned to the middle of the cell</td> 19 <td class="align-bottom">These lines of text are vertically aligned to the bottom of the cell</td> 20 </tr> 21 </table> 22 23 24 </body> 25 </html>
可以利用display:table, display:table-row和display:table-cell规则，可以将元素转化为表格，行和单元格~