如何将多个图像在隐藏溢出的父母内左右水平居中
问题描述:
我在包装中有50个小图像。我希望图像在隐藏溢出的同一行上水平显示。它的作品,但图像从左边开始。如何将多个图像在隐藏溢出的父母内左右水平居中
如何在中间而不是左侧将起始点设为左和右?
这里是我的代码:
<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>
这里是我的CSS:
.whoARRAY {
width: 100%;
height: 90px;
overflow-x: hidden;
display: inline-block;
}
.whoARRAY img {
}
答
你需要通过JS来计算。 您可以使用scrollWidth
& 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>