【发布时间】：2021-06-18 07:08:27
【问题描述】：
我有一个在桌面上看起来不错的页脚。
在移动设备上，我希望社交图标像上面的文字一样居中。
这是代码：
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.screen-readers {
position: absolute;
padding: 0;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.footer {
background: #921801;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
color: #fff;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.footer-col-1 p {
font-size: 1.1rem;
font-family: "Raleway", sans-serif;
}
.footer-col-2 {
text-align: center;
}
.social {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.social li + li {
margin-left: 0.8em;
}
.social li > a {
display: block;
color: #fff;
font-size: 2.4rem;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a3eb3c88b5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="footer-social.css">
<title>Footer Social</title>
</head>
<body>
<footer class="footer">
<div class="footer-container">
<div class="footer-col-1">
<p>Copyright 2021 My Name. All Rights Reserved.</p>
</div>
<div class="footer-col-2">
<ul class="social">
<li>
<a href="#" target="_blank" rel="noopener" aria-label="Facebook">
<i class="icon-facebook fab fa-facebook-square" aria-hidden="true" title="Facebook"></i>
<span class="screen-readers">Facebook</span>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noopener" aria-label="YouTube">
<i class="icon-youtube fab fa-youtube-square" aria-hidden="true" title="YouTube"></i>
<span class="screen-readers">YouTube</span>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noopener" aria-label="Likedin">
<i class="icon-linkedin fab fa-linkedin" aria-hidden="true" title="Linkedin"></i>
<span class="screen-readers">Linkedin</span>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noopener" aria-label="Vimeo">
<i class="icon-vimeo fab fa-vimeo-square" aria-hidden="true" title="Vimeo"></i>
<span class="screen-readers">Vimeo</span>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noopener" aria-label="Twitter">
<i class="icon-twitter fab fa-twitter-square" aria-hidden="true" title="Twitter"></i>
<span class="screen-readers">Twitter</span>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noopener" aria-label="IMDB">
<i class="icon-imdb fab fa-imdb" aria-hidden="true" title="IMDB"></i>
<span class="screen-readers">IMDB</span>
</a>
</li>
</ul>
</div> <!-- / .footer-col-2 -->
</div> <!-- / .footer-container -->
</footer>
</body>
</html>我想我可以通过使用flex-direction: column 移动设备和align-items: center 来修复它，对吗？然后在桌面上使用flex-direction: row，但这需要我现在没有的媒体查询。
有没有其他的方法来解决它？我想要的是社交图标在包装后也能在移动设备上居中，但桌面保持不变。
【问题讨论】：