Question

我在创建一个水平堆叠图像的视图时遇到问题，在div的左侧和右侧垂直居中的小箭头包含用于滚动视图的图像。

箭头最终以页面为中心，而不是中心图像。

我试图让它看起来像这样： http://www.vanleeuwenicecream.com/

如果可能的话，我希望左右箭头只用CSS / HTML定位。

这是我到目前为止所拥有的： https://github.com/thorkia/cssPositioningIssue

任何帮助将不胜感激

注意：

我可以通过使用js更改包含图像的div上的左边距来使视图滚动正常。我删除了样本。我只需要正确定位箭头

Answer 1

.imagesContainer {
  width: 100%;
  height: 500px;
  position: relative;
  background: red;
}

.imageScrollers .imageScrollBack img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 20px;
}

.imageScrollers .imageScrollNext img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 20px;
}

<div class="imagesContainer">

  <div class="imageScrollers">
    <span class="imageScrollBack"><img src="dawdaw" alt=""></span>
    <span class="imageScrollNext"><img src="dawdaw" alt=""></span>
  </div>
</div>

左右箭头浮动

1 个答案: