How to set center alignment in css table-CSS Tutorial-php.cn

How to set center alignment in css table

青灯夜游

Release： 2023-01-04 09:34:37

Original

4948 people have browsed it

In CSS, you can align the middle of the table by setting the "margin:auto;" style to the table element. This style assigns the same auto value to the left and right margins of an element. Then the left and right margins of this element will equally divide the available space occupied, so we will see that the element is horizontally centered.

How to set center alignment in css table

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css table setting center alignment

In css, you can set the margin:auto; style for the table tag to center the table.

<!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>

Copy after login

Rendering:

How to set center alignment in css table

margin:auto; working principle

It assigns the same auto value to the left and right margins of an element, then the left and right margins of this element will equally divide the available space occupied (1 of the width of the parent element) /2), so we see that the element appears horizontally centered.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set center alignment in css table. For more information, please follow other related articles on the PHP Chinese website!