javascript - 由于窗口宽度，需要根据缩放比例将元素与其兄弟元素垂直对齐

Question

我有一个元素，无论窗口宽度是多少，它始终需要与其兄弟元素垂直对齐。我希望能够用 CSS 做到这一点，但似乎它可能需要用 JavaScript 来完成。如果是这样的话，jQuery 没问题，它只需要支持现代浏览器 (IE 11+)。

关于此的棘手部分是它需要占图像的 50%，而不是整个容器。

请注意:div.icon 的父级或兄弟级的标记或样式不能更改。

https://jsfiddle.net/thebluehorse/srp7g2cf/

.container {
  position: relative;
}
.slide {
  float: left;
  height: 100%;
  min-height: 1px;
}
img {
  width: 100%;
  display: block;
}
.icon {
  height: 8vw;
  width: 8vw;
  background: blue;
  position: absolute;
  top: 50%;
}
body {
  font-size: 100%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container">
  <div class="list clearfix">
    <div class="slide">
      <img src="http://placehold.it/1800x750">
    </div>
  </div>
  <div class="icon"></div>
  <ul>
    <li>Lorem ipsum dolor sit amet, et hymenaeos elit orci, rutrum dolor magna pellentesque ante euismod magna, sodales turpis quos class condimentum. Integer in vel etiam. Etiam pellentesque nibh phasellus sed, eget ipsum enim sed in et at, non ligula quis
      egestas sed quis. Lectus vitae, lobortis vestibulum maecenas auctor lorem eros, luctus vitae aliquam aliquam ipsum ligula nascetur, habitasse eu lectus imperdiet leo. Ut est fusce class conubia nunc felis, proin aliquam vitae nunc accumsan orci.
      A eu erat in.</li>
    <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis
      taciti cras a.</li>
  </ul>
</div>

Answer 1

一种选择是使用 calc()为了从 top: 50% 中减去元素高度的一半:

.icon {
  position: absolute;
  top: calc(50% - 4vw);
  height: 8vw;
  width: 8vw;
}

当然，您也可以使用等于元素高度一半的负边距来置换元素:

.icon {
  position: absolute;
  top: 50%;
  margin-top: -4vw;
  height: 8vw;
  width: 8vw;
}

根据评论，因为您使用的是 slick library ，您需要将 .icon 元素附加到 slider ，以便它相对于 slider 绝对定位。

您可以监听 init 事件，然后相应地附加图标:

Updated Example

$('.list').on('init', function(event, slick) {
  var $icon = $(this).closest('.container').find('.icon');
  $(this).append($icon);
});