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