Блог

Главная - Вопросы по программированию - Шрифт с вертикальным центрированием, потрясающий значок в ссылке в div ссылка имеет странную область для кликабельности

Шрифт с вертикальным центрированием, потрясающий значок в ссылке в div ссылка имеет странную область для кликабельности

#html #css #frontend

#HTML #css #интерфейс

Вопрос:

Моя цель — расположить значок шрифта Awesome с возможностью кликабельности (ссылка) по вертикали в div-панели. Это не работает. Вместо этого иконка прилипает к нижней части div.

Это то, что я пробовал:

 #bar {
  background-color: red;
}

#bar>a {
  font-size: 100px;
  color: white;
  background-color: green;
  display: inline-block;
}

#bar>a>svg {
  background-color: blue;
  vertical-align: middle;
}  
 <script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<div id="bar">
  <a href="https://www.google.com">
  <i class="fab fa-instagram"></i>
  </a>  
</div>

Кроме того, как ссылка может быть только точной областью символа?

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

1. отображение: заблокировать SVG и убрать выравнивание по вертикали?

Ответ №1:

Проблема в line-height — поскольку вы сделали размер шрифта для иконки таким большим, это также увеличило высоту строки (а высота строки обычно больше, чем буквы шрифта, чтобы обеспечить интервал между строками).

Вы можете исправить это, уменьшив высоту строки, чтобы она соответствовала (или была меньше) высоте иконки, например:

 #bar > a {
      font-size: 100px;
      line-height:75px;
      /* rest of CSS */
 }

Рабочий фрагмент:

 #bar {
        background-color: red;
    }

    #bar > a {
      font-size: 100px;
      color: white;
      background-color: green;
      display: inline-block;
      line-height:75px;

    }

    #bar > a > svg {
      background-color: blue;
        vertical-align: middle;
    }  
 <script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>


<div id="bar">
  <a href="https://www.google.com">
    <i class="fab fa-instagram"></i>
  </a>  
</div>

Ответ №2:

удалите vertical-align:middle из #bar > a > svg , и все будет в порядке. также очистите кэш перед загрузкой, нажав ctrl F5.