如何將多個圖像在隱藏溢出的父母內左右水平居中

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

如何將多個圖像在隱藏溢出的父母內左右水平居中

回答

相關問題