有没有办法使用 Flexbox 在媒体查询中将我的社交媒体图标居中？

Posted 2023-03-21

技术标签:

【中文标题】有没有办法使用 Flexbox 在媒体查询中将我的社交媒体图标居中？【英文标题】：Is there a way to center my social media icons in media query using Flexbox? 【发布时间】：2019-09-21 12:22:38 【问题描述】：

我无法理解如何在移动设备中将我的社交媒体图标居中。我该怎么做？

我应该让社交媒体图标具有响应性。我尝试使用 Flexbox 作为页脚。我使用了text-align: right 或align-items: right。

我创建了媒体查询来覆盖它，例如 text-align: center 或 align-items: center。但是，当我通过 Firefox 开发者版在响应模式下对其进行测试时，它不会让步。

更新我将其更改为 Font Awesome 图标并设置了样式。我仍然无法在媒体查询下使我的图标居中。

html

<footer class="main-footer">
  <div class="footer-content">
    <ul class="contact-links">
      <li><i class="fab fa-github" ></i></li>
      <li><i class="fab fa-linkedin" fab fa-twitter-square" ></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;

我错过了什么？还有什么要补充的吗？

【问题讨论】：

你有什么理由不使用类似字体的东西来使用图标吗？将使它们的样式更容易，并且您提供的代码示例更容易让我们为您提供帮助还建议字体图标，让text-align: center之类的东西变得轻而易举最初是因为我想自定义图标的颜色。使用字体真棒图标更好吗？ @Chizzele font-awesome library for 3 个图标会增加不必要的负载，但如果您要在项目中使用大量图标，这是一个不错的选择。谢谢，我将它们更新为字体很棒的图标。当我在 Firefox 开发者版中以响应式设计模式测试它时，仍然无法将它们居中。 【参考方案1】：

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

【讨论】：

这里是帮助理解 flexbox 的资源。 developer.mozilla.org/en-US/docs/Web/CSS/…【参考方案2】：

您的 CSS 中错误的选择器可能是您的问题。您的 CSS 中有 .footer，但 HTML 中有它。你的意思可能只是footer

在 flexbox 中，如果你想居中，你只需在 wrapper 元素中添加一个display: flex。然后也申请