Html 如何使用 CSS 将表格放在页面中央？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9402856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put table in the center of the page using CSS?
提问by CodeBlue
I am using the following code. How to put this table in the center of the page using 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>
回答by Michael Robinson
回答by DarkAjax
You can try using the following CSS:
您可以尝试使用以下 CSS：
table {
margin: 0 auto;
}?
回答by Gopal00005
1) Setting horizontal alignment to auto in CSS
1）在CSS中将水平对齐设置为自动
margin-left: auto;
margin-right: auto;
margin-left: auto;
margin-right: auto;
2) Get vertical alignment to centre of the page add following to css
2) 获取与页面中心的垂直对齐方式，将以下内容添加到 css 中
html, body {
width: 100%;
}
html, body {
width: 100%;
}
For example :
例如 ：
<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>
回答by user2645333
<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>
回答by Alok Rajasukumaran
If you where asking about the table to complete center, like some thing in total center., you can apply the following code.
如果您询问表格以完成中心，例如总中心中的某些事情，您可以应用以下代码。
margin: 0px auto;
margin-top: 13%;
this code in css will let you put your table like floating. Tell me if it helps you out.
css 中的这段代码会让你把你的表格像浮动一样。告诉我它是否对你有帮助。
回答by mohsen solhnia
simply put it in the div then control that div whit css:
简单地把它放在 div 中然后控制那个 div whit css：
<div class="your_position">
<table>
</table>
</div>
