轮播中的不同尺寸的图像以垂直对齐的方式显示在中间

问题描述

我创建了一个简单的轮播，其外部DIV的宽度和高度设置为600 X 800，位置设置为“ position：relative”，并且该DIV中的图像为“ position：absolute”，顶部和左侧均为零。我还保留了一个“左/右”按钮，以便每当我单击左/右按钮时，图像都将使用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>

谢谢。

解决方法

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

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