光滑的滑块滑动内的中心项目

Question

我已经安装了 slick slider 并且可以运行了。但是我很难将幻灯片中的项目居中 [

请参考附图，如您所见，只有“Dog”居中，因为我直接在 div 中使用了 <p style={{ textAlign: "center" }}>Dog</p>。这不是我的解决方案，因为它不是我要显示的文本。

我尝试的是找到光滑的幻灯片并尝试在 css 中居中。然而，这并没有奏效。请参考我附上的代码，如有任何帮助，我们将不胜感激。

CSS

.slick-slide
{
    display: none;
    float: left; 

    height: 100%;
    min-height: 1px;

    textAlign: center;
    justifyContent: center;
    alignItems: center;
    
}

滑块

 <Slider {...settings}>
            <div>
              <p style={{ textAlign: "center" }}>Dog</p>
            </div>
            <div>
              <p>Fish</p>
              <a href="https://www.google.com" target="_blank">
                <img src="https://www.google.com" alt="test" />
              </a>
            </div>

            <div>
              <p>CCat</p>
            </div>

Answer 1

在 <Slider/> 组件中添加一个 class（例如：contentContainer）并对其应用下一个属性：

.contentContainer {
display: flex;
justify-content: center
}

结果：

<Slider {...settings}>
            <div className="contentContainer">
              <p style={{ textAlign: "center" }}>Dog</p>
            </div>
            <div className="contentContainer">
              <p>Fish</p>
              <a href="https://www.google.com" target="_blank">
                <img src="https://www.google.com" alt="test" />
              </a>
            </div>

            <div className="contentContainer">
              <p>CCat</p>
            </div>

光滑的滑块滑动内的中心项目

Center items inside of slick slider slide

reactjs

slick.js