Я сделал шахматную доску, используя HTML и CSS для задания. Теперь мне нужно разместить эту шахматную доску внутри элемента коробки, чтобы поля слева и справа были одинаковыми и отображался элемент заголовка. Я пробовал использовать margin: auto; но это не сработало. Не изменилось и изменение размера окна на поле содержимого или границу.
Мне не разрешено использовать line-height для вертикального выравнивания, поэтому мне нужны display: table-cell и vertical-align: middle. Я также не могу использовать justify-content, если это поможет. Это должно быть сделано с помощью базовых c HTML и CSS.
Как мне заставить шахматную доску правильно позиционироваться, как на изображении?
JSFiddle
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;
}