Как центрировать прокручиваемый горизонтальный список, если он меньше родительского контейнера? [дубликат] ⇐ CSS

[Anonymous]

Мне нужно меню, которое можно прокручивать/перетаскивать по горизонтали, когда оно не помещается в область просмотра.
Я уже нашел способ, и он работает как журнал, если он выровнен. влево, но я не могу найти способ центрировать меню, когда оно меньше области просмотра.

Код: Выделить всё

.tabs-box-wrapper {
padding: 10px;
position: relative;
overflow-x: hidden;
border: 1px solid #000;
}

.tabs-box-wrapper .tabs-box {
display: flex;
flex-direction: row;
gap: 25px;
list-style: none;
overflow-x: scroll;
margin-bottom: 0;
padding-inline-start: 25px;
padding-inline-end: 25px;
scroll-snap-type: x mandatory;
scrollbar-width: 0px;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}

.tabs-box-wrapper .tabs-box::-webkit-scrollbar {
display: none;
}

.tabs-box .tab {
white-space: nowrap;
scroll-snap-align: center;
border: 1px solid #000;
padding: 0 25px;
}

Код: Выделить всё

[list]
[*]AAAAA
[*]BBBBB
[*]CCCCC
[*]DDDDD
[*]EEEEE
[*]FFFFF
[*]GGGGG
[/list]

Подробнее здесь: https://stackoverflow.com/questions/793 ... its-parent