javascript - 轮播中不同尺寸的图像以垂直居中显示

Question

我创建了一个简单的轮播，其外部 DIV 的宽度和高度设置为 600 X 800，位置设置为“位置：相对”，该 DIV 内的图像为“位置：绝对”，顶部和左侧为零。我还保留了一个“左/右”按钮，这样每当我单击左/右按钮时，图像就会通过使用 JQuery 相应地向左/向右移动。一切正常，包括响应式。但是当我有不同尺寸的图像时我遇到了一个问题，我想在水平和垂直中心显示它（“vertical-align:middle”）。我在 CSS 中尝试了不同的方法，但似乎没有运气。我知道我可以使用 JavaScript 来做到这一点，但想知道是否有人可以帮助我只使用 CSS，非常感谢......如果可能的话，我想避免使用 JavaScript。请注意，此轮播一次只显示一张图片。

这是我现在的代码：

<div style="position:relative;">
   
    // image style is set to position:absolute;left:0;top:0
    //  _______________________________________
    //  |           |          |               |
    //  |           |          |_______________|
    //  |           |          |               
    //  |___________|          | 
    //              |__________|
    //

</div>

我希望它是这样的：

<div>
   
    //              ___________
    //  ____________|          |
    //  |           |          |_______________
    //  |           |          |               |
    //  |           |          |_______________|
    //  |___________|          | 
    //              |__________|

</div>

谢谢你。

标签： javascriptjquerycsscarousel

Answer 1

您可以在容器 div 上使用 flexbox。

div {
  display: flex;
  flex-direction: row;
  align-items: center;
}