How would I separate an item from a UL that is centered? - html

Question

I am trying to achieve the following:
But what I am getting is this:
Here is my HTML (react JSX but is the same thing):
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
And my (S)CSS:
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-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;
}
}
.icons_ul {
justify-content: center;
}
.toplefticon {
justify-content: flex-start;
}
I cannot find out for the life of me how to do this, whether with flexbox or something else!
Thanks for your answers,
Henry

Answer 1

.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.icons_ul li{
margin: 1em 0;
}
.icons_ul {
justify-content: center;
}
.toplefticon {
position: absolute;
top: 0;
left: 5px;
transform: translateX(-50%);
margin-top: 25%;
}
<div class="snavbarcontainer">
<div class="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div class="mainIcons">
<ul class="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>

Answer 2

Try this:
//JSX
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /</a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
//added this
<div className="bottomlefticon">
<a class="test" href="#"><img src={bottomLeftIcon} alt="Testing Logo" /</a>
</div>
</div>
//CSS
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
//added this
justify-content: space-between;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
I added the bottom left icon at the bottom of the code so there can be proper space between them.