文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何让社交图标在移动端居中对齐？

问如何让社交图标在移动端居中对齐？
EN

Stack Overflow用户
提问于 2021-03-21 20:51:26
回答 2查看 32关注 0票数 0

我有一个页脚，它在桌面上看起来很好。

​

​

在手机上，我希望社交图标居中，就像上面的文字一样。

​

​

代码如下：

​

代码语言：javascript
复制
: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;
}
代码语言：javascript
复制
<!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>

​

我想我可以通过在手机和align-items: center上使用flex-direction: column来解决这个问题，对吗？然后在桌面上使用flex-direction: row，但这需要媒体查询，而我现在没有媒体查询。

有没有不同的方法来修复它？我想要的是社交图标在包装后也能在移动设备上居中，但桌面保持不变。

flexbox
html
css
EN

回答 2

Stack Overflow用户

发布于 2021-03-21 20:56:36

将justify-content: center添加到包含社交媒体图标的flex容器.social中，并将width: 100%;添加到.footer-col-2中

​

代码语言：javascript
复制
: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;
  width: 100%;
}

.social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;

}

.social li + li {
  margin-left: 0.8em;
}

.social li > a {
  display: block;
  color: #fff;
  font-size: 2.4rem;
  text-decoration: none;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN

Stack Overflow用户

发布于 2021-03-21 22:47:55

将以下代码添加到您的CSS中：

代码语言：javascript
复制
@media only screen and (max-width: 690px) {
      .footer-col-2 {
        margin: 0 auto;
      }
}

如果需要，您可以更改最大宽度，但最后应如下所示(运行代码片段)：

​

代码语言：javascript
复制
: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;
}

/* Add this: */

@media only screen and (max-width: 690px) {
  .footer-col-2 {
    margin: 0 auto;
  }
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66732490

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档