如何把表放在页面的中心使用CSS？
我正在使用下面的代码。 如何把这个表格在页面的中心使用CSS？
<html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Main Page</title> </head> <body> <table> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html> html, body { width: 100%; } table { margin: 0 auto; }
示例JSFiddle
垂直alignment块元素不是最简单的事情。 下面的一些方法。
- 了解垂直alignment，或“如何（不）垂直居中内容”
- 在CSS中垂直居中
你可以尝试使用下面的CSS：
table { margin: 0px auto; }
<html> <head> <meta charset="ISO-8859-1"> <style type="text/css"> table.center { margin-left: auto; margin-right: auto; } </style> <title>Table with css</title> </head> <body> <table class="center"> <tr> <th>SNO</th> <th>Address</th> </tr> <tr> <td>1</td> <td>yazali</td> </tr> </table> </body> </html>
1）在CSS中将水平alignment设置为自动
margin-left: auto; margin-right: auto;
2）垂直alignment到页面中心添加以下到CSS
html, body { width: 100%; }
例如 ：
<html> <head> <meta charset="ISO-8859-1"> <style type="text/css"> table.center { margin-left: auto; margin-right: auto; } html, body { width: 100%; } </style> <title>Table with css</title> </head> <body> <table class="center"> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html>
如果你在哪里询问表格要完成中心，就像中心的一些东西一样，你可以应用下面的代码。
margin: 0px auto; margin-top: 13%;
在CSS这个代码将让你像浮动你的表。 告诉我，如果它可以帮助你。
简单地把它放在div中，然后控制div div css：
<div class="your_position"> <table> </table> </div>
