Блог

Главная - Вопросы по программированию - Когда я нажимаю на значок социальной сети, логотип на значке смещается вверх

Когда я нажимаю на значок социальной сети, логотип на значке смещается вверх

#html #css

#HTML #css

Вопрос:

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

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

когда я нажимаю на этот значок, буква «f» внутри круга перемещается на несколько пикселей вверх. Происходит только по щелчку. Когда я отпускаю, он перемещается в центр.

 <div class="social-buttons">  
<a href="https://www.facebook.com/sharer/sharer.php?u=https://test.com/foundation-level-it-professional-certification/" target="blank" class="social-margin" rel="noopener noreferrer"> 
<div class="social-icon facebook">
<i class="fa fa-facebook" aria-hidden="true"></i> 
</div>
</a>


.social-buttons{
 display: flex;
  align-items: center; /* flex vertical alignment */
  justify-content: space-evenly;
}

.social-icon {
  margin-bottom: 15px;
   box-sizing: border-box;
  -moz-border-radius: 138px;
  -webkit-border-radius: 138px;
  border-radius: 138px;
  border: 5px solid;
  text-align: center;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 1px;
  padding-top: 11px;
  transition: all 0.5s;
}

.social-icon-no-border {
  margin-bottom: 15px;
     box-sizing: border-box;
  -moz-border-radius: 138px;
  -webkit-border-radius: 138px;
  border-radius: 138px;
  text-align: center;
  width: 50px;
  height: 50px;
  display: inline-block;
  transition: all 0.5s;
}

.social-icon:hover {
    transform: rotate(360deg)scale(1.3);
  }

.social-icon-no-border:hover{
        transform: rotate(360deg)scale(1.3);
}

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

1. кажется, что масштаб смещен от центра. это все еще происходит при удалении команды масштабирования?

Ответ №1:

Я думаю, это то, что вы хотите.

 .social-buttons{
 display: flex;
  align-items: center; /* flex vertical alignment */
  justify-content: space-evenly;
}

.social-icon {
  margin-bottom: 15px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid blue;
  display:inline-flex;
  text-align: center;
  width: 50px;
  height: 50px;
  font-size:50px;
  
  transition: all 0.5s;
}


.social-icon:hover {
    transform: rotate(360deg)scale(1.3);
  }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<div class="social-buttons">  

<a href="https://www.facebook.com/sharer/sharer.php?u=https://test.com/foundation-level-it-professional-certification/" target="blank" class="social-margin" rel="noopener noreferrer"> 
<div class="social-icon facebook">

<i class="fab fa-facebook" aria-hidden="true"></i> 
</div>
</a>

Ответ №2:

После долгих проб ошибка, виновником была граница. Как только я прокомментировал border: 5px solid; , проблема была устранена.