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

Question

我有一个元素始终需要与其兄弟元素垂直对齐，无论 window 宽度是多少。我希望能够使用 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 元素附加到滑块，使其绝对定位 relative 到它。

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

Updated Example

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

Answer 2

如果我没看错，您希望图标垂直居中，如果是这样，只需将顶部和底部设置为 0，并添加边距：自动。请参阅下面的更新代码。

.icon {
  height: 8vw;
  width: 8vw;
  background: blue;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Answer 3

你不需要jQuery。

只需将 .icon 的样式替换为下一个：

.icon {
  height: 8vw;
  width: 8vw;
  position: absolute;
  top: 50%;
}
.icon:before {
   background: blue;
  content: '';
  height:100%;
  width:100%;
  position: relative;
  display: block;
  top: -50%;
}

https://jsfiddle.net/srp7g2cf/5/

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

Need to vertically align an element with it's sibling element based on scaling due to window width

javascript

css

jquery

vertical-alignment