如何使用溢出居中滚动元素

Question

I am working on a design that I had to center some images. I have tried UI Slider and Slick Slider to get it working, but they always break in Material CSS Modal.

Here is the screenshot of what I am trying to achieve.

I tried to use this 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;
}

justify-content: center; doesn't seems to work

Answer 1

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

Answer 2

As Jeyffrey has stated above align-items is the thing you're looking for. You might want to take a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ as it might be helpful.