Используя flexbox, изо всех сил пытаемся получить justify-content для выравнивания объектов по центру. - PullRequest
Новая
       43

Используя flexbox, изо всех сил пытаемся получить justify-content для выравнивания объектов по центру.

0 голосов
/ 25 февраля 2020

Как мне получить мой <ul class="social"> контейнер, чтобы выровнять дочерние элементы <li class="social"> в линию в центре моего <footer> контейнера? Я пытаюсь использовать flexbox вместо абсолютного положения, чтобы мои значки не перекрывали вторичную навигационную панель внутри нижнего колонтитула, что происходило ранее. С тех пор я полностью перестроил свой нижний колонтитул, но пока не очень хорошо разбираюсь в flexbox. Я попытался использовать justification-content: center; на <ul class="social"> контейнере, который по какой-то причине ничего не сделал. Любая помощь будет оценена!

Codepen: 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;
}

1 Ответ

1 голос
/ 25 февраля 2020 
ul.social    
}
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

Я думаю, что это должно решить вашу проблему, но я думаю, поскольку последний ребенок li имеет изображение внутри li, вам, возможно, придется настроить CSS, чтобы сделать последний li в центре.

Надеюсь, что поможет.

...