буклет контролирует не вертикально по центру Mac

Question

Я использую буклет, и я заметил, что кнопки управления, верхний правый угол моего сайта не центрированы по вертикали.это только в браузерах Mac, я пробовал браузеры Ubuntu и выглядит идеально по центру.как я могу это исправить?я попытался показать flex с центром выравнивания элементов, и это не сработало.Я также попытался удалить текст кнопки внутри якоря и использовать вместо «+» и «-» внутри псевдоселекторов.Всегда одна и та же проблема. страница

Могу ли я добавить значок в эту брошюру вместо кнопки увеличения текста и увеличения?

учетные данные: элементы / avonis

html-код

<a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a>

стиль:

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  align-items: center;
  background: $primary;
  border-radius: 50%;
  color: $white;
  display: flex;
  justify-content: center;
}

Answer 1

Я обнаружил, что размер шрифта и отображаемый вес шрифта зависят от ОС. так что, возможно, браузеры Mac должны немного отличаться от браузеров Windows. поэтому я использовал font-awesome font. его идеально сосредоточено на операционных системах и браузерах.

L.control.zoom({
   zoomOutText: '<i class="fa fa-minus text-white m-0 p-0"></i>',
   zoomInText: '<i  class="fa fa-plus text-white  m-0 p-0"></i>',
   position:'topright'
}).addTo(map);