How to position table-cell in a box-element
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;
}
Solution
Simply remove the entire display:table-cell; property from table.chessboard{}. I also centered the h2 text for you. jsFiddle
.chessboardbox {
box-sizing: border-box;
border: 5px solid silver;
max-width: 1200px;
}
.chessboardbox>h2 {
text-align: center;
}
table.chessboard {
box-sizing: border-box;
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;
}<!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>- Clear clipboard to prohibit unauthorised copying, insert message?
- Can you render a html file into a container?
- how to position two elements left and right
- Debounce in ReactJS
- Angular - Why isn't my dropdown list working
- Is [h6 aria-level="7"] a reliable way to create a [h7] element?
- There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit
- How can I prevent address bar from hiding in mobile browsers?
- How do you limit the number of options selected in an HTML <select> element?
- Is there an option on the IFrame element to load it before the dom page loaded event?
- Changing Font Color in HTML Email for AOL Mail
- TypeError: 'Locator' object is not callable using .first() in Playwright
- is form enctype "application/json" available?
- QTextBrowser not processing CSS properly
- Cannot remove bootstrap button border
- Unable to center navbar properly
- Popover on input field
- How to hide an element and all its children from screen readers?
- Force a line break in a URL
- Select text in ::before or ::after pseudo-element
- Trying to size div as percentages of the entire page
- Remove all style attributes from HTML in PHP
- Tooltips for mobile browsers
- How to open Windows Explorer via link
- Method 'POST' is not supported - Spring
- Monitor an images folder to get a live local html/javascript gallery
- Is call to preventDefault() really necessary on drop event?
- Use rvest to scrape all p after h? (or other R package)
- How to position two elements side by side using CSS
- Data not getting into the database