HTML table content align center not working on one element-CodePudding

I have a table that aligns all cell content in the center of the cell. I have used a repo Dice because I needed a quick animated dice. Unfortunately, I do not understand the CSS well enough to know why the dice is not aligning in the center of the cell, like all the other items.

This is what it looks like on load:

And this is what it looks like if i roll a 6

As you can see the dice now goes out of the cell and overflows to left side of the table.

This is my html:

<table id="diceTable" >
    <th colspan="2">
        Roll the dice
    </th>
    <tr>
        <td colspan="2" >
            <ol  data-roll="1" id="die-2">
                <li  data-side="1">
                    <span ></span>
                </li>
                <li  data-side="2">
                    <span ></span>
                    <span ></span>
                </li>
                <li  data-side="3">
                    <span ></span>
                    <span ></span>
                    <span ></span>
                </li>
                <li  data-side="4">
                    <span ></span>
                    <span ></span>
                    <span ></span>
                    <span ></span>
                </li>
                <li  data-side="5">
                    <span ></span>
                    <span ></span>
                    <span ></span>
                    <span ></span>
                    <span ></span>
                </li>
                <li  data-side="6">
                    <span ></span>
                    <span ></span>
                    <span ></span>
                    <span ></span>
                    <span ></span>
                    <span ></span>
                </li>
            </ol>
        </td>
    </tr>
    <tr>
        <td colspan="2" >
            <button type="button" id="roll-button1">Roll Dice</button>
        </td>
    </tr>
    <tr>
        <td >
            <button type="button" id="btnMove1">Move 1</button>

        </td>
        <td >
            <button type="button" id="btnMove2">Move 2</button>
        </td>
    </tr>
    <tr>
        <td >
            <button type="button" id="btnReturn1">Return 1</button>
        </td>
        <td >
            <button type="button" id="btnReturn2">Retuen 2</button>
        </td>
    </tr>
</table>

And the CSS:

.die-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 6rem;
  list-style-type: none;
  transform-style: preserve-3d;
  width: 6rem;
}

.die-item {
  background-color: #fefefe;
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
    inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-areas:
    "one two three"
    "four five six"
    "seven eight nine";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  padding: 1rem;
  width: 100%;
}

.td, .tableCellCenter {
  text-align: center;
}

Can anyone help me align the dice in the center so it stays in the center, please? Thank you in advance.

CodePudding user response：

Add this to the top of your CSS file/section. This will strip out browser-added paddings and margins (padding: 0 and margin: 0) from all your elements and ensure paddings and borders are part of the width and height of any element (box-sizing: border-box).

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

Then in your .die-list ruleset, include margin: 0 auto;. This will center the die list element.

.die-list {
    margin: 0 auto; 
}