Centering items when all items are in view.

[chillikid]

Thanks for the great script.

What I want to do is center the items on screen when all items are visible on screen. As a default they always start on the right .
I tried
.v-hl-container {
justify-content: center;
}

This works when all items on screen are visible, but then when all items cannot fit on screen it causes a problem in that elements expand both to the left and right out of the viewport and the initial view position is the center of the row.

Is there a simple CSS way to achieve this ? It would seem like a common user case.

Thanks

[chillikid]

After an awful lot of messing about and trying different things, I got it to center on the screen when there are less items than the full width of the viewport by doing the following

<style> .v-hl-container { margin: 0 auto -30px !important; width: auto !important; } </style>

It would be nice if this could be an option in the CSS core as I'm not a fan of using !important to force override styles.

[mahammad-sixberries]

thanks @chillikid, I'd prefer

.v-hl-container {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}