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

Question

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

Answer 1

我会这样做：

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

这将使放在中心的那个 div 中的所有内容对齐 - 但如果有这么多点，并不能真正防止它破裂。