在光滑的滑块内居中项目

Posted 2023-05-07

【中文标题】在光滑的滑块内居中项目

【英文标题】：Center items inside of slick slider slide

【发布时间】：2021-12-17 05:58:24

【问题描述】：

我已经安装了光滑的滑块并且可以使用它。 但是我在幻灯片内居中项目时遇到困难[

请参考附图， 如您所见，只有“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"  />
              </a>
            </div>

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

【参考方案1】：

在<Slider/> 组件内的 div 中添加一个类（例如：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"  />
              </a>
            </div>

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