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

您是否尝试过使用justify-content：center

Answer 2

您的CSS中的选择器错误可能是您遇到的问题。 CSS中有.footer，但HTML中有footer。您可能只是说display: flex

在flexbox中，如果要居中放置，只需在wrapper元素中添加align-items: center;。然后也要申请

justify-content: center;

使其内容垂直居中

transient String obj;

将其内容水平居中

是否可以使用Flexbox在社交媒体查询中将我的社交媒体图标居中？

2 个答案: