Нижний колонтитул со значками авторских прав и социальных сетей не будет располагаться вертикально - PullRequest
Новая
       21

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

0 голосов
/ 19 сентября 2018

Работаю над созданием моего сайта.Я уверен, что это легко исправить, но я так застрял!

Я пытаюсь вертикально центрировать информацию об авторских правах справа, а затем социальные иконки слева.Но они выглядят сложенными и выровненными влево и вправо.

Вот как это выглядит

Пожалуйста, прости тупой вопрос.Очень новичок во всем этом, и я сделал столько проблем, сколько смогу.Я надеюсь, что это "дух" ответ!

У меня есть нижний колонтитул в моем индексе, который выглядит так: 

 #main-footer {
  padding: center;
  background: darken($primary-color, 10);
  color: set-text-colour($primary-color);
  height: 60px;

  .footer_text {
    text-align: right;
    font-size: 17px;
  }

  .footer_icons {
    margin-left: 5%;
    text-align: center;
    display: block;
    width: 100px;
    padding: 4px;
    a {
      align: left;

      &:hover {
        color: $secondary-color;
        @include easeOut;
      }
    }
  }
}
<footer id="main-footer">

  <div class="footer_text">Copyright &copy; 2018</div>

  <div class="footer_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fab fa-instagram fa-2x"></i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fab fa-linkedin fa-2x"></i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fab fa-vimeo fa-2x"></i>
    </a>
  </div>

</footer>

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

Мне не удалось напрямую использовать ваш код с помощью codepen, поэтому я быстро что-то смоделировал.Вы можете быстро центрировать по вертикали, используя flexbox.Это может потребовать, однако, что вы также используете некоторые префиксы.Можете проверить это здесь:

https://codepen.io/pen/?editors=1100

#main-footer {
  background-color: teal;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.social {
  display: flex;
}

.footer-icons {
  background-color: red;
  height: 10px;
  width: 10px;
  margin: 5px;
  padding: 5px;
}
<footer id="main-footer">
  <div>Copyright &copy; 2018</div>
  
  <div class="social">
    <div class="footer-icons"></div>
    <div class="footer-icons"></div>
    <div class="footer-icons"></div>
  </div>
  
</footer>
0 голосов
/ 19 сентября 2018

Я бы порекомендовал следующее:

  • Выполните перенастройку своего HTML-кода, чтобы ваш .footer_text div шел после .footer_icons div.

  • Добавьте следующие строки CSS вваш #main_footer div.

    display: flex;align-items: center;justify-content: space -ween;

См. фрагмент кода ниже или этот код ручки : 

#main-footer {
  padding: center;
  background: darken($primary-color, 10);
  color: set-text-colour($primary-color);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .footer_text {
    text-align: right;
    font-size: 17px;
  }

  .footer_icons {
    margin-left: 5%;
    text-align: center;
    display: block;
    width: 100px;
    padding: 4px;
    a {
      align: left;

      &:hover {
        color: $secondary-color;
        @include easeOut;
      }
    }
  }
}
 <footer id="main-footer">



  <div class="footer_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fab fa-instagram fa-2x">IG</i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fab fa-linkedin fa-2x">LI</i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fab fa-vimeo fa-2x">VI</i>
    </a>
  </div>
   
   <div class="footer_text">Copyright &copy; 2018</div>

</footer>
0 голосов
/ 19 сентября 2018 

$primary-color:white;
$secondary-color:white;
#main-footer {
  padding: center;
  background: darken($primary-color, 10);
  color: set-text-colour($primary-color);
  height: 60px;
  line-height: 60px;

  .footer_text {
    font-size: 17px;
    line-height:60px;
    float: right;
  }

  .footer_icons {
    margin-left: 5%;
    text-align: center;
    display: inline-block;
    width: 150px;
    padding: 4px;
    a {
      align: left;
      padding-right:10px;

      &:hover {
        color: $secondary-color;
      }
    }
  }
}

i{
  font-family:'FontAwesome';
}
 <footer id="main-footer">

  <div class="footer_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fa fa-instagram fa-2x"></i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fa fa-linkedin fa-2x"></i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fa fa-vimeo fa-2x"></i>
    </a>
  </div>
   <div class="footer_text">Copyright &copy; 2018</div>

</footer>

Это должно работать..footer_text{float:right;line-height:60px;} .footer_icons{display:inline-block;}

Кодовая ссылка: https://codepen.io/mk_dev/pen/KxbyJp

...