I made a Chessboard using HTML and CSS for an assignment. Now I need to position this Chessboard inside the box element so the margin left/right will be the same and the header element is shown. I tried using margin: auto; but this didn't work Neither did changing the box-sizing to content-box or border-box.
I am not allowed to use line-height to vertical align so I need display:table-cell and vertical-align:middle. Nor can I use justify-content if that would help. It should be done with basic HTML and CSS.
How can I get the Chessboard to position correctly like the image?
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="chessboardbox">
<h2>Chessboard</h2>
<table class="chessboard">
<tr class="chessboard">
<td class="chessboard">♜</td>
<td class="chessboard">♞</td>
<td class="chessboard">♝</td>
<td class="chessboard">♛</td>
<td class="chessboard">♚</td>
<td class="chessboard">♝</td>
<td class="chessboard">♞</td>
<td class="chessboard">♜</td>
</tr>
<tr class="chessboard">
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
</tr>
<tr class="chessboard">
<td class="chessboard">♖</td>
<td class="chessboard">♘</td>
<td class="chessboard">♗</td>
<td class="chessboard">♕</td>
<td class="chessboard">♔</td>
<td class="chessboard">♗</td>
<td class="chessboard">♘</td>
<td class="chessboard">♖</td>
</tr>
</table>
</section>
</body>
</html>
CSS
.chessboardbox {
box-sizing: border-box;
border: 5px solid silver;
max-width: 1200px;
}
table.chessboard {
box-sizing: border-box;
display: table-cell;
margin: 48px auto;
background: #999;
border: 5px solid red;
box-shadow: 0 0 0 20px #fff, 0 0 0 40px black;
}
td.chessboard {
width: 80px;
height: 80px;
font-size:50px;
}
tr.chessboard {
text-align: center;
vertical-align: middle;
}
tr.chessboard:nth-child(odd) td.chessboard:nth-child(even),
tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) {
background: white;
}
