浮动左右箭头答案

【问题标题】：Floating Left and Right Arrows浮动左右箭头
【发布时间】：2016-11-03 10:04:13
【问题描述】：

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

箭头最终相对于页面居中，而不是中心图像。

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

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

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

任何帮助将不胜感激

注意：

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

【问题讨论】：

您可能希望在代码中包含相关元素和样式的位置。更好的是，隔离问题并在此处添加相关代码，以便那些试图帮助您的人不必筛选您的代码库。
在此处或在 jsfiddle 上创建一个 code-sn-p，然后创建您所拥有的。 HTML 和 CSS。
这里需要提供代码。

标签： html css bootstrap-4

【解决方案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>

【讨论】：