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

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

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

CodePudding user response：

.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;
}

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

CodePudding user response：

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

CodePudding user response：

Try to add flex to ul also:

body {
  margin: 0
}

.snavbarcontainer {
  background-color: black;
  width: 3.5em;
  height: 100vh;
  position: fixed;

  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

.icons_ul {
  text-decoration: none;
  list-style-type: none;
  padding: 0;
  display: grid;
  justify-items: center;
  align-items: center;
}
li {
  margin: 1em 0;
}

.toplefticon {
  margin-top: 1em;
  justify-self: start;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<div class="snavbarcontainer">
  <div class="toplefticon">
    <a class="test" href="#"><img src="" alt="" /><i class="fas fa-search"></i></a>
  </div>
  <div class="mainIcons">
    <ul class="icons_ul">
      <li><a href="#"><img src="" alt="" /><i class="fas fa-users"></i></a></li>
      <li><a href="#"><img src="" alt="" /><i class="fas fa-search"></i></a></li>
      <li><a href="#"><img src="" alt="" /><i class="fas fa-search"></i></a></li>
      <li><a href="#"><img src="" alt="" /><i class="fas fa-search"></i></a></li>
      <li><a href="#"><img src="" alt="" /><i class="fas fa-search"></i></a></li>
      <li><a href="#"><img src="" alt="" /><i class="fas fa-search"></i></a></li>
    </ul>
  </div>
</div>