Блог

Главная - Вопросы по программированию - Как я могу выровнять значки социальных сетей по центру на мобильном устройстве?

Как я могу выровнять значки социальных сетей по центру на мобильном устройстве?

#html #css #flexbox

Вопрос:

У меня есть нижний колонтитул, который отлично смотрится на рабочем столе.

введите описание изображения здесь

На мобильном устройстве я бы хотел, чтобы социальные иконки были также центрированы, как и текст над ними.

введите описание изображения здесь

Это и есть код:

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

Я думаю, что смогу это исправить, используя a flex-direction: column для мобильных устройств, и align-items: center я прав? Затем на рабочем столе используйте flex-direction: row , но для этого требуются медиа-запросы, которых сейчас у меня нет.

Есть ли другой способ это исправить? Я хочу, чтобы социальные значки также были сосредоточены на мобильных устройствах после их переноса, но рабочий стол оставался таким же, как есть.

Ответ №1:

Добавьте justify-content: center в .social , который является контейнером flex, содержащим значки социальных сетей, и 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>

Комментарии:

1. Спасибо, я ценю ваше время. Проблема в том, что это портит внешний вид рабочего стола, который я хочу сохранить таким же, как на изображении выше. Другими словами, я хочу, чтобы значки были справа на рабочем столе и в центре на мобильном телефоне.

2. Ну, конечно, вы должны поместить эти настройки в медиа — запрос ( @media screen and (max-width: 600px) { ... mobile rules here ... } ) — или любую другую максимальную ширину, которую вы хотите для этого использовать.

3. тогда не лучше ли сделать столбец направления гибкого трубопровода на мобильном устройстве и строку на рабочем столе? Как только направление будет указано, я смогу выровняться с align-items: center

Ответ №2:

Добавьте следующий код в свой CSS:

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

Вы можете изменить максимальную ширину, если хотите, но в конце она должна выглядеть так (запустите фрагмент кода) :

 :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>
Метки: