como dice el título, estoy tratando de lograr esto:

Este es mi código HTML (es JSX pero la única diferencia entre JSX y HTML es el hecho de que la clase se llama className ya que es una palabra clave reservada de JS):

 <div className="snavbarcontainer"> <div className="toplefticon"> </div> <div className="mainIcons"> <ul className="icons_ul"> <li className="top_time"><a href="#"><img src={topleft} alt="Testing Logo" /></a></li> <li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li> <li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li> <li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li> <li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li> <li><a href="#"><img src={IDash} alt="Dashboard" /></a></li> <li><a href="#"><img src={IDB} alt="Dashboard" /></a></li> </ul> </div> </div>

Mi (S) CSS:

 body { //! background-color: red; - DEBUGGING ONLY! margin: 0 } .snavbarcontainer { background-color: black; width: 3.5em; height: 100vh; position: fixed; display: grid; place-items: center; } .icons_ul { text-decoration: none; list-style-type: none; padding: 0; li /* Adds property to EACH LI, not the UL itself. */{ margin: 1em 0; } } .toplefticon { justify-content: top; align-items: flex-start; order: 1; } .top_time { margin: auto; }

Gracias por tu ayuda.