Comment centrer plusieurs images horizontalement à gauche et à droite à l'intérieur d'un parent avec débordement caché

Question

J'ai 50 petites images dans une enveloppe. Je veux que les images apparaissent horizontalement sur la même ligne avec débordement caché. Cela fonctionne MAIS les images commencent à partir de la gauche.

Comment faire un débordement GAUCHE et DROITE avec le point de départ au milieu plutôt qu'à gauche?

Voici mon code:

<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> 

Voici mon CSS:

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

.whoARRAY img { 

} 

Answer 1

Vous devrez calculer via JS. Vous pouvez utiliser scrollWidth & offsetWidth afin de calculer scrollLeft.

Faites attention à la white-space: nowrap, cela rend les images à ne pas envelopper dans le conteneur.

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>