我不知道如何在移动版的React Slick slider中垂直对齐图片。总是16:9的图片(垂直图片)在div的上面,但我想让它们在div的中间(就像箭头的位置)。
jsx文件
return (
<div className="galerija-container">
<div className="grupa">
<h2>Lavanda</h2>
<Slider
{...settings}
style={{
display: "flex",
}}
>
{lavanda.map((item, index) => (
<div key={index} className="slike">
<img src={item.slika} alt="" />
</div>
))}
</Slider>
</div>
</div>
);
scss文件。
.galerija-container {
width: 95%;
margin: 20px auto;
& .grupa {
background-color: var(--lightorange);
border-radius: 15px;
padding: 10px;
height: 450px;
margin: 40px 0;
& h2 {
text-align: center;
font-size: 2.5rem;
}
& img {
max-height: 350px;
max-width: 100%;
padding: 5px;
border-radius: 30px;
margin: 0 auto;
}
}
& .arrow {
font-size: 50px;
padding: 5px;
cursor: pointer;
color: var(--lightgrey);
height: 350px;
display: flex;
align-items: center;
}
}