开启styleMode后如何居中Highcharts地图导航按钮的±图标

当开启styleMode并使用官方通用主题时，缩放按钮的图标偏移通常是因为styleMode禁用了Highcharts默认的内联样式，同时主题CSS可能覆盖了按钮的对齐规则。可以通过以下自定义CSS强制修复：

• 强制按钮使用flex布局实现图标居中，清除默认内边距：

  .highcharts-map-navigation button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  

• 重置图标元素的外边距，避免偏移：

  .highcharts-map-navigation .highcharts-button-symbol {
    margin: 0;
  }
  

• 若主题设置了异常的行高或文本对齐，强制覆盖：

  .highcharts-map-navigation .highcharts-button {
    text-align: center;
    line-height: normal;
  }
  

验证技巧 #

用浏览器开发者工具（F12）选中缩放按钮元素，切换styleMode开关，对比开启/关闭状态下的Computed样式，重点查看align-items、justify-content、padding、margin这些影响对齐的属性，就能快速定位被主题或styleMode覆盖的规则。

内容的提问来源于stack exchange，提问作者Peter Meyerhofer