如何使社交图标与移动设备的中心对齐？

Posted

技术标签:

【中文标题】如何使社交图标与移动设备的中心对齐？【英文标题】：How can I make the social icons align to the center on mobile? 【发布时间】：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，但这需要我现在没有的媒体查询。

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

【问题讨论】：

【参考方案1】：

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

: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;

<!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>

【讨论】：

谢谢您的宝贵时间。问题是它弄乱了桌面外观，我希望保持与上图相同。换句话说，我希望桌面右侧的图标和移动设备的中心。 嗯，当然，您应该将这些设置放入媒体查询 (@media screen and (max-width: 600px) ... mobile rules here ... ) - 或您想要使用的任何最大宽度。 那么在移动设备上制作flex方向列在桌面上制作行不是更好吗？一旦方向是列，我就可以与align-items: center 对齐【参考方案2】：

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

@media only screen and (max-width: 690px) 
      .footer-col-2 
        margin: 0 auto;

您可以根据需要更改最大宽度，但最后应该如下所示（运行代码 sn-p）：

: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;
  

<!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>

【讨论】：

以上是关于如何使社交图标与移动设备的中心对齐？的主要内容，如果未能解决你的问题，请参考以下文章

社交图标在移动设备和某些平板电脑中不起作用（链接不起作用，它们不会在悬停时更改图像）

如何将我的 WordPress 网站与移动设备对齐

浮动后对齐中心项目

如何使用移动设备的引导程序并排对齐 div？ [复制]

Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮

如何在 bootstrap4 导航栏中对齐社交媒体图标及其工具提示？