Центр выравнивания содержимого таблицы HTML не работает с одним элементом

У меня есть таблица, которая выравнивает все содержимое ячейки по центру ячейки. Я использовал репозиторий Dice, потому что мне нужен был быстрый анимированный кубик. К сожалению, я недостаточно хорошо понимаю CSS, чтобы понять, почему кости не выравниваются по центру ячейки, как и все остальные элементы.

Вот как это выглядит при загрузке:

load

А вот как это будет выглядеть, если я выкину 6

6roll

Как видите, кости теперь выходят из ячейки и перетекают в левую часть стола.

Это мой html:

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

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

И 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;
}

Может ли кто-нибудь помочь мне выровнять кости по центру, чтобы они оставались в центре, пожалуйста? Заранее спасибо.

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте это в начало файла/раздела CSS. Это удалит добавленные браузером отступы и поля (padding: 0 и margin: 0) из всех ваших элементов и гарантирует, что отступы и границы являются частью ширины и высоты любого элемента (box-sizing: border-box).

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

Затем в свой набор правил .die-list включите margin: 0 auto;. Это отцентрирует элемент списка штампов.

.die-list {
    margin: 0 auto; 
}

Спасибо. Работал отлично

Cleaven 18.05.2022 05:32

Другие вопросы по теме