html - 使用 react-slick 居中幻灯片

Question

我正在尝试实现一个反应光滑的轮播，但我无法将图像垂直居中。这里演示了这个问题。

https://codesandbox.io/s/react-slick-playground-o7dhn

这里是问题

图像未居中：

• Flexbox 属性不起作用（红色 div 是带有 的 flexbox justify-content: center; align-items: center;）
• margin:auto仅适用于水平对齐（如果我使用 flexbox，我不应该设置）
• 我无法摆脱上边距（即使padding:0px在 div 和margin-top:0px图像上）因此，任何高度为 400px 或更高的图像都会被移动并被切断（div 的高度为 400px）

我如何解决它。

标签： htmlcssreactjsslick.jsreact-slick

Answer 1

   img {
      margin: auto;
      height: 200px;
      width: 200px;
    }
    
    .slick-slide > div {
      display: grid;
      place-items: center;
      width: 80%;
      margin-top: 50px;
      margin: auto;
      height: 500px;
      padding: 0px;
      background: red;
    }

这正在工作。我只是将 display flex 更改为 grid，并使 place-items 居中