"/>

css表格垂直居中怎么设置?

css设置表格垂直居中的方法:1、在表格外面嵌套一层table,用table中的td来控制居中。2、将表格放在div标签中,通过为div设置css样式display:table-cell实现垂直居中。

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其它相关文章!

推荐阅读