使用 flexbox，努力讓 justify-content 在中心對齊對象

Question

如何讓我的<ul class="social">容器將<li class="social">子項對齊到我的<footer>容器中心的一條線上？ 我正在嘗試使用 flexbox 而不是絕對位置，這樣我的圖標就不會與頁腳內的輔助導航欄重疊，這在以前發生過。 從那時起我已經完全重組了我的頁腳，但我還不是很精通 flexbox。 我試過使用justification-content: center; 在<ul class="social">容器上，由於某種原因它什么也沒做。 任何幫助，將不勝感激！

代碼筆： https ://codepen.io/daniel-albano/pen/poJydQj ? editors = 1100

頁腳容器，所有 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>

頁腳容器，所有 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;
}

Answer 1

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

我想這應該解決您的問題，但我猜，因為最后一個孩子li是有內部的圖像li ，你可能需要調整CSS做出最后的li在中央。

希望有幫助。