如何使用溢出居中滾動元素

Question

我正在設計一個必須將一些圖像居中的設計。 我已經嘗試過 UI Slider 和 Slick Slider 來讓它工作，但它們總是在 Material CSS Modal 中中斷。

這是我想要實現的屏幕截圖。

我嘗試使用這個 CSS

//HTML

        <div class="scroolable">
            <img src="/assets/card4.png" alt="">
            <img src="/assets/card4.png" alt="">
            <img src="/assets/card4.png" alt="">
            <img src="/assets/card4.png" alt="">
            <img src="/assets/card4.png" alt="">
        </div>

//css

.scroolable {
    display: flex;
    justify-content: center;
    overflow: scroll;
}

對齊內容：居中； 似乎不起作用

Answer 1

您需要在此處使用align-items ( https://developer.mozilla.org/fr/docs/Web/CSS/align-items ) 而不是justify-content 。

Answer 2

正如Jeyffrey在上面所說的align-items是你正在尋找的東西。 您可能想看看https://css-tricks.com/snippets/css/a-guide-to-flexbox/，因為它可能會有所幫助。