CSS表格设置中间对齐

在css中，可以为表格table标签设置margin:auto;样式使表格居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格居中</title>
		<style>
			div{
				width: 200px;
				padding: 10px;
				border: 1px solid peru;
			}
			table,td,tr {
				border: 1px solid red;
				margin: auto;
			}
		</style>
	</head>

	<body>
		<div>
		<table>
			<tr>
				<td>12</td>
				<td>12</td>
				<td>12</td>
			</tr>
			<tr>
				<td>12</td>
				<td>12</td>
				<td>12</td>
			</tr>
			<tr>
				<td>12</td>
				<td>12</td>
				<td>12</td>
			</tr>
		</table>
		</div>
	</body>

</html>

效果图：

css表格怎么设置中间对齐

margin:auto;的工作原理

它给一个元素的左外边距和右外边距赋予同样的auto值，那么这个元素的左、右外边距就会平分所占据的可用空间（父元素宽度的1/2），因此我们会看到在元素表现水平居中。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。