css设置表格垂直居中的方法示例:
方法一:在外面嵌套一层table,用table中的td来控制居中
<form id="form1" method="post"> <table border=1px cellpadding=0 cellspacing=0 style="width:50height:50quot;> <tr> <td style="width:100" align="center" valign="middle"> <table style="background-color:lightskyblue; margin:auto"> <tr> <td></td> <td > 居中 </td> <td></td> </tr> </table> </td> </tr> </table> </form>
效果图:
方法二:将表格放在div标签中通过为div设置css样式display:table-cell实现垂直居中。
HTML代码:
<div><table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table></div>
css代码:
div{ border:5px solid red; width: 200px; height: 200px; display: table-cell; vertical-align: middle;} table { border=1px ; width: 100px; height: 100px; }
效果图:
以上就是css表格垂直居中怎么设置?的详细内容,更多请关注易知道|edz.cc其它相关文章!