时间戳

首页 > 解决方案 > 当我在图像下有文字时，如何使箭头相对于光滑滑块中的图片垂直居中？

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

问题描述

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

标签： javascriptcssslick.js

解决方案

我在 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;
}

推荐阅读