Home > Article > Web Front-end > How to set center alignment in css table
How to set center alignment in css table
- 青灯夜游Original
- 2021-04-06 17:16:395059browse
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.
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>Rendering:
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!