Существуют определенные свойства гибкости, которые применимы только к элементам flex, в то время как другие применимы только к гибким контейнерам.
Свойства align-items
и justify-content
применяются только к контейнерам с гибкостью. Тем не менее, вы используете их в элементе flex ...
.likeness-rank-table .col .col-inner {
flex: 1;
align-items: center;
justify-content: center;
height: 150px;
}
... поэтому они игнорируются.
Вам нужно добавить display: flex
к правилу выше , Это заставит align-items: center
работать.
Однако justify-content: center
будет продолжать сбой, потому что у родителя есть max-width: 20%
ограничение горизонтального движения.
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%; /* limits horizontal centering of child element */
min-height: 50px;
display: flex;
flex-wrap: wrap;
}
Итак, примените горизонтальное центрирование на родительский уровень вверх.
.likeness-rank-table .likeness-rank-table-body {
display: flex;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #a2a5a7;
justify-content: center; /* new */
}
Вот полезный список свойств flex, разбитых на родительский и дочерний: https://css-tricks.com/snippets/css/a-guide-to-flexbox/