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

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/，因为它可能会有所帮助。