html - 传单控件在 Mac 上不垂直居中

Question

我是 usign 传单，我注意到我网站右上角的按钮控件没有垂直居中。这仅适用于 Mac 浏览器，我尝试了 ubuntu 浏览器并且看起来完美居中。我该如何解决？我尝试使用 align-items center 显示 flex，但没有用。我还尝试删除 anchor 内的按钮文本，并在伪选择器之后使用“+”和“-”代替。总是同样的问题。 page

我可以在此传单中添加图标放大和缩小按钮而不是文本吗？

凭证:元素/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 字体。它完美地以操作系统和浏览器为中心。

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);