提问人：Natalia Tkaczyk 提问时间：9/22/2023 最后编辑：ralph.mNatalia Tkaczyk 更新时间：9/27/2023 访问量：135
带有居中的社交媒体图标的页脚
Footer with centered social media icons
问：
我试图在页脚的中心获得 3 个社交媒体图标，我已经在每一侧对齐了一个链接。一切都在一个奇怪的地方，我不确定如何让它坐在我想要的地方，因为我对编码很陌生。
我尝试只使用嵌入图像，每个图标都用于中心，我尝试使用 fa 图标（推荐在这里：并在许多 CodePen 模板中使用）。<a><ul><li>https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
以下是一些期望与现实的关系： https://imgur.com/Hn1gBMj
答：
0赞
Lex T
9/22/2023
#1
你的页脚应该有 3 个直接子项：两个链接，在它们之间有一个 div，里面有三个社交图标。在页脚上，put 和 .display: flexjustify-content: space-between
编辑：我没有足够的声誉来评论你的答案，但这里有一个带有简化版页脚的代码笔：https://codepen.io/lextir/pen/PoXezPe
0赞
Natalia Tkaczyk
9/22/2023
#2
让它与这个一起工作：
<footer>
<div class="footer-container">
<a class="link footer-left" href="index.html">n.l.tkaczyk</a>
<div class="footer-icons">
<ul>
<li><a href="https://www.linkedin.com/in/nltkaczyk/"><i class="fa fa-linkedin fa-2x"></i></a></li>
<li><a href="https://www.instagram.com/n.l.tkaczyk/"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a href="https://www.youtube.com/@n.l.tkaczyk/"><i class="fa fa-youtube fa-2x"></i></a></li>
</ul>
</div>
<a class="link footer-right" href="contact.html">contact</a>
</div>
<div class="copyright">
<p style="color: #95AAB6;">
2023 © by Natalia Lidia Tkaczyk
</p>
</div>
</footer>
和 CSS：
footer {
text-align: center;}
.footer-container {
background-color: #95AAB6;
display: flex;}
.footer-container a {
color: #F5F6F7;
padding: 42px 16px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: medium;}
.footer-left {
margin-right: auto}
.fa:hover {
color: #45405F;}
.footer-icons {
justify-content: space-between;
padding: 16px 64px 0px 0px}
.footer-icons ul {
list-style-type: none;}
.footer-icons li {
display: inline-block;}
.footer-right {
margin-left: auto}
.copyright
{background-color: #F5F6F7;
overflow: hidden;}
我不得不使用一些填充物来让它居中，因为它有点偏离，但现在它似乎工作得很好，所以谢谢！我通过从不同来源复制代码来使它过于复杂，所以我从头开始接受您的建议。如果有什么可以优化的，请告诉我:)
评论
display: flexmargin-right: automargin-left: auto