CODEWITHSUNDEEP
htmlcssflexboxcontainersjustify
Daniel Albano
Daniel Albano

Reputation: 21

Using flexbox, struggling to get justify-content to align objects in center

How can I get my <ul class="social"> container to align the <li class="social"> children into a line in the center of my <footer> container? I am trying to use flexbox instead of position absolute so that my icons do not end up overlapping the secondary nav bar inside the footer, which happened previously. I have fully restructured my footer since then, but am not very proficient in flexbox yet. I have tried using justification-content: center; on the <ul class="social"> container, which did nothing for some reason. Any help would be appreciated!

Codepen: https://codepen.io/daniel-albano/pen/poJydQj?editors=1100

FOOTER CONTAINER, ALL HTML: 

<footer>
  <ul class="social">
    <li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
        target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
    </li>
    <li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
        target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
    <li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
        <i class="fab fa-behance"></i> </a> </li>
    <li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
        target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
        <img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
      </a> </li>
  </ul> 
  <ul class="navi"> 
      <div class="navi-title">
  Navigation
  </div> 
    <li class="navi">
        <a href="PLACEHOLDER">
          Home
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Works
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Contact
        </a>
      </li>
  </ul> 
</footer>

FOOTER CONTAINER, ALL CSS: 

footer {
  background-color: #2a7de1;
  padding: 2% 0% 2% 0%;
  margin-top: 20%;
  display: flex; 
  justify-content: center; 
}
ul.social {
  display: flex;
  align-items: center;
}
footer ul.social li.social {
  list-style: none;
}
footer > ul.social li.social a {
  font-size: 2vw;
  margin: 0% 0% 0% 0%;
  overflow: hidden;
  text-decoration: none;

}
footer > ul.social li.social a .fab {
  color: white;
}
footer > ul.social li.social a:hover .fab {
  transform: scale(1.3);
  transition: 0.3s;
}
.upwork {
  width: 2.2%;
}
.upwork:hover {
  transform: scale(1.3);
  transition: 0.3s;
}
footer > ul.navi li.navi {
  list-style: none;
}
.navi-title {
  color: white;
  font-family: 'karla';
  font-size: 1.4vw;
    margin: 0% 0% 10% 0%; 
  font-weight: 700;
}
footer > ul.navi li.navi a {
   text-decoration: none;
  color: white;
    font-family: 'karla';
  font-size: 1.2vw;
  display: flex;
  flex-flow: column-wrap;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}

Upvotes: 0

Views: 48

Answers (1)

Nithin Suresh
Nithin Suresh

Reputation: 380

ul.social    
}
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

I think this should solve your problem, but I guess since the last child li is having an image inside the li you might have to adjust the CSS to make the last li at the center.

Hope that helps.

Upvotes: 1

Related Questions