我已經安裝了光滑的滑塊并使其運行。但是，我很難將幻燈片內的專案居中[
請參閱附圖，正如您所看到的，只有“狗”居中，因為我<p style={{ textAlign: "center" }}>Dog</p>直接在 div 內使用。這不是我的解決方案，因為它不是我將要顯示的文本。
我所嘗試的是找到光滑的幻燈片并嘗試在 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>
uj5u.com熱心網友回復：
在<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" alt="test" />
</a>
</div>
<div className="contentContainer">
<p>CCat</p>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/345878.html