Wie kann ich eine scrollbare horizontale Liste zentrieren, wenn sie kleiner als ihr übergeordneter Container ist? [DupliCSS

CSS verstehen
Guest
 Wie kann ich eine scrollbare horizontale Liste zentrieren, wenn sie kleiner als ihr übergeordneter Container ist? [Dupli

Post by Guest »

Ich möchte ein Menü, das horizontal gescrollt/gezogen werden kann, wenn es nicht in das Ansichtsfenster passt.
Ich habe bereits einen Weg gefunden und es funktioniert genauso gut, wie es ausgerichtet ist links, aber ich kann keine Möglichkeit finden, das Menü zu zentrieren, wenn es kleiner als das Ansichtsfenster ist.

Code: Select all

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

Code: Select all

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

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post