Question

我在包装器中有50个小图像。我希望图像水平显示在隐藏溢出的同一行上。它的工作原理，但图像从左侧开始。

如何使用中间的起点而不是左起点左右溢出？

这是我的代码：

＆＃13;

.whoARRAY {
  width: 100%;
  height: 90px;
  overflow-x: hidden;
  display: inline-block;
}

.whoARRAY img {}

＆＃13;

<div class="whoARRAY"><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_017.png" /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_016.png" /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_015.png" /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_014.png"
  /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_013.png" /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_012.png" /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_011.png" /><img
    src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_010.png" /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_009.png" /><img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_010.png" /></div>

＆＃13;

Answer 1

您需要通过JS计算它。您可以使用scrollWidth＆amp; offsetWidth为了计算scrollLeft。

注意white-space: nowrap，它会使图像不包裹在容器内。

document.addEventListener("DOMContentLoaded", (event) => {
  const elm = document.querySelector('.whoARRAY');
  elm.scrollLeft = elm.scrollWidth / 2 - elm.offsetWidth / 2
});

.whoARRAY {
  width: 100%;
  height: 90px;
  overflow-x: auto;
  display: inline-block;
  white-space: nowrap;
}

.whoARRAY img {
  vertical-align: middle;
}

<div class="whoARRAY">
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_017.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_016.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_015.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_014.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_013.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_012.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_011.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_010.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_009.png" />
  <img src="https://www.young-marines.com/wp-content/uploads/2017/09/ym_010.png" /></div>

如何左右水平居中多个图像在父母内部，隐藏溢出

1 个答案: