如何在直线上水平对齐箭头图标和滑块点？

Question

我正在使用 react-slick 创建带有以下原型的标题的图像滑块。 唯一的问题是我需要在默认点位置下方显示相应图像的文本，因此我我正在尝试使用 onClick 函数创建自定义点和箭头。如果点数是动态的，我如何将它们居中对齐并排成一行。

Answer 1

以下是我的做法：

   #dotsContainer {
    width: 100%;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    }

这会将放在 div 中的所有内容对齐到中心 - 但如果有太多点，并不能真正防止它损坏。