Почему моя строка таблицы `flex` не центрирована в Edge? - PullRequest
Новая
       7

Почему моя строка таблицы `flex` не центрирована в Edge?

0 голосов
/ 28 мая 2020

Для разрабатываемого мной веб-сайта у меня есть таблица. Таблица состоит из x строк. Когда во второй строке меньше элементов, чем в первой, я хочу центрировать элементы по горизонтали. Для этого я использую flexbox. В Chrome и Firefox это работает нормально. Но когда я тестирую его в Edge, элементы строки таблицы не центрируются.

Строка таблицы 

<tr>
    <td >
        <div class="table-image item-image"></div>
        <div style="color: rgb(0, 0, 0);">Diensten</div>
    </td>
    <td>
        <div class="table-image item-image"></div>
        <div style="color: rgb(0, 0, 0);">Domotica</div>
    </td>
    <td>
        <div class="table-image item-image"></div>
        <div style="color: rgb(0, 0, 0);">Communicatie</div>
    </td>
    <td>
        <div class="table-image item-image"></div>
        <div style="color: rgb(0, 0, 0);">Personalisatie</div>
    </td>
</tr>

Сама строка таблицы имеет следующий стиль:

Стиль. css

tr {
    display: flex;
    justify-content: center;
}

td {
    text-align: center;
    display: inline-block;
}

Хром / Firefox поведение:

[] [] [] [] Строка 1

- [] [] [] - Строка 2 (по центру)

Поведение краев:

[] [] [] [] Строка 1

[] [ ] [] - Строка 2 (не по центру)

Кто-нибудь знает, почему Edge не может справиться с этим и как это исправить?

...