Есть ли способ центрировать мои иконки социальных медиа в медиазапросе с помощью Flexbox?

Question

У меня проблемы с пониманием того, как расположить значки социальных сетей на мобильных устройствах.Как мне это сделать?

Я должен сделать иконки социальных сетей отзывчивыми.Я попытался использовать Flexbox для моего нижнего колонтитула.Я использовал text-align: right или align-items: right.

Я создал медиа-запросы для переопределения, например text-align: center или align-items: center.Однако, когда я тестировал его в адаптивном режиме через Firefox Developer Edition, он не сдвинулся с места.

Обновление Я изменил его на иконки Font Awesome и стилизовал его.Я все еще не могу сделать свои значки в центре под медиа-запросом.

HTML

<footer class="main-footer">
  <div class="footer-content">
    <ul class="contact-links">
      <li><i class="fab fa-github" alt="GitHub"></i></li>
      <li><i class="fab fa-linkedin" alt="LinkedIn></i></li>
      <li><i class="fab fa-twitter-square" alt="Twitter"></i></li>
    </ul>
  </div>
</footer>

CSS

/*** index.html footer ***/
.main-footer{
  display: flex;
  justify-content: right;
}

/*** index.html footer ***/

footer{
  display: flex;
  justify-content: right;
  text-align: right;
}

.main-footer > .footer-content {
    position:relative;
}

/*** index.html - Footer - Social Media Contact Icons/Links ***/

ul.contact-links .fab {
  padding: 5px;
  border-radius: 5px;
  font-size:24px;
  color: #CC3366;
}

ul.contact-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

ul.contact-links li {
    display: inline-block;
    margin: 5px;
}

/* index.html Main Footer Media Queries */

@media (max-width: 480px) {
footer{
  display: flex;
    justify-content: center;
  }
}

Чего мне не хватает?Что-нибудь еще, что я должен добавить?

Answer 1

Неправильные селекторы в вашем CSS могут быть вашей проблемой. У вас есть .footer в вашем CSS, но у вас есть в HTML. Вы можете иметь в виду просто footer

Если во flexbox вы хотите что-то центрировать, вы просто добавляете display: flex в элемент оболочки. Тогда также примените

align-items: center;

для центрирования содержимого по вертикали

justify-content: center;

для центрирования содержимого по горизонтали

Answer 2

пытались ли вы использовать justify-content: center