javascript - Leaflet Easy Button中图标的位置
问题描述
我在传单地图上使用传单简易按钮:
<!-- Load LeafletEasyButton -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
我也在使用 Google Material 图标:
<!-- Load Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
目标是在我的传单地图上创建一个自定义按钮,如下所示:
L.easyButton('<i class="material-icons" style="font-size:18px;">gps_fixed</i>', function(){
locateMe();
}, {position: 'bottomright'}).addTo(map);
它可以工作,但我的自定义按钮中的图标位于按钮中心上方:
如何使图标居中?
解决方案
您可以在 CSS 代码中使用左/上:
.widget-code {
display: block;
height: 18px;
left: 6px;
margin: 0;
padding: 0;
position: absolute;
top: 6px;
width: 18px;
}
推荐阅读
- firebase - 如何使用 pyrebase 访问 Firebase 实时数据库中的根子节点
- swift - SwiftUI - 在父视图中堆叠多个方法调用
- tensorflow - 为什么 keras 不会在我的整个图像集上训练
- html - 如何在 CSS 中用网格容器填充剩余空间?
- python - 使用 playsound 模块 python 错误 259 无法播放声音文件
- python - 适用于 windows 和 linux 的路径
- python - Pandas 数据透视表和小计
- reactjs - React.JS FormControl:如何正确设置默认值
- algorithm - 是 ϴ(n)/n = ϴ(1) 吗?
- reactjs - 在使用条纹的 Reactjs 中,我需要包括网上银行、UPI、借记卡和信用卡支付