当图像下有文字时，如何使箭头相对于滑动滑块中的图片垂直居中？

问题描述

在图片上您可以看到我的箭头在顶部：相对于幻灯片容器的高度为50％ [1]：https://i.stack.imgur.com/DjEZh.png

解决方法

我在Codepen上做了一个快速演示：https://codepen.io/basti-n/pen/NWNRKYX?editors=1111

  <div class="main-content">
    <div class="arrow-left"><</div>
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="elephant">
  <div class="arrow-right">></div>
  </div>
    <div class="description">
      <caption>Lorem Ipsum</caption>
    </div>
</div>

body {
  box-sizing: border-box;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.main-content {
  display: flex;
  align-items: center;

  img {
    height: 300px;
    width: auto;
    margin: 0 10px;
  }
}

.description {
  margin-top: 12px;
}