Así que estoy trabajando en esta tarea para la escuela, donde tengo que recrear un sitio web en un nivel (más o menos) básico. Estoy creando el sitio web oficial www.formula1.com . Cuando te desplazas hacia abajo en la página, verás un calendario con todas las carreras. Las diferentes razas se colocan una al lado de la otra y al presionar una se moverá al centro y se abrirá una ventana de vista detallada. No tengo que hacer que abra la ventana con más información, pero quiero hacerlo de modo que si se hace clic en un elemento de la lista, la lista se mueva hacia los lados en consecuencia para que este elemento esté ahora en el medio. .

Jugué con las funciones de Javascript por un tiempo en el que agregaría una clase a la lista que la movería x cantidad de píxeles hacia un lado si se seleccionaba un determinado elemento. Técnicamente, esto funciona, pero solo puedo hacer clic en un elemento y hacer que se mueva, pero después de eso no funciona porque ahora tendría que moverse a diferentes distancias si hiciera clic en otro elemento, pero no lo sabe, por supuesto.

¿Hay alguna manera de hacer que simplemente centre la lista en ese elemento específico?

Este es mi html para la lista. He usado flexbox para poner los elementos uno al lado del otro.

 <ul> <li> <img src="images/belgium-flag.png" alt="Belgian Flag"> <p>Belgium</p> </li> <li> <img src="images/netherlands.png" alt="Dutch Flag"> <p>Netherlands</p> </li> <li> <img src="images/italy.png" alt="Italian Flag"> <p>Italy</p> </li> <li> <img src="images/russia.png" alt="Russian Flag"> <p>Russia</p> </li> <li> <img src="images/turkey.png" alt="Turkish Flag"> <p>Turkey</p> </li> <li> <img src="images/usa.png" alt="Flag of the United States of America"> <p>United States</p> </li> </ul>