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

我在包装中有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 { 

}

来源

2017-09-03 Erik

你需要通过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>

来源

2017-09-03 05:56:13 felixmosh

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

回答

相关问题