Как расположить значки социальных сетей в нижнем колонтитуле? - PullRequest
Новая
       2

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

0 голосов
/ 26 февраля 2019

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

footer {
  background-color: #FFF;
  color: white;
  padding: 15px;
}

.fa{
    color: black;
    font-size: 50px;

}

<div class="container">
  <footer>
    <div class="footer-social-icons">
        <a href="#" class="fa fa-facebook"></a>
        <a href="#" class="fa fa-instagram"></a>
    </div>
  </footer>
 </div>
</div>

Ответы [ 4 ]

0 голосов
/ 26 февраля 2019

У вас есть три варианта:

  • Если вы используете Bootstrap, вы можете просто добавить text-center в ваш колонтитул.
  • вы можете добавить text-align:в центре вашего стиля нижнего колонтитула.
  • Вы можете определить ширину элемента div, а затем задать для него значение поля auto, как показано ниже: 

.social{
display: block;
width: 20%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
</div>      
</body>
</html>
0 голосов
/ 26 февраля 2019

Выровняйте текст в footer по центру с text-align: center;. 

footer {
  ...
  text-align: center;
}


footer {
  background-color: #FFF;
  color: white;
  padding: 15px;
  text-align: center;
}

.fa{
    color: black;
    font-size: 50px;

}
<div class="container">
  <footer>
    <div class="footer-social-icons">
        <a href="#" class="fa fa-facebook">F</a>
        <a href="#" class="fa fa-instagram">I</a>
    </div>
  </footer>
 </div>
</div>
0 голосов
/ 26 февраля 2019

Этого можно добиться и с помощью свойства display: flex.

.footer-social-icons{
 display:flex;
 justify-content:center;
 width:100%;
 }
0 голосов
/ 26 февраля 2019

Вы пытались добавить text-align: center к footer?enter image description here

jsFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...