传单中心标记编号答案

【问题标题】：Leaflet Center Marker Numbers传单中心标记编号
【发布时间】：2022-01-21 20:03:53
【问题描述】：

有没有人知道如何将标记内的数字居中？这是目前的情况。

创建标记

    return L.divIcon({
  className: "green-icon",
  iconSize: [25, 41],
  iconAnchor: [10, 44],
  popupAnchor: [3, -40],
  html: markerNumber,
});

CSS

.green-icon {
 background-image: url("../GreenIcon.png");
 background-repeat: no-repeat;
 margin: 0 auto;
 text-align: center;
 color: white;
 font-weight: bold;
 }

【问题讨论】：

标签： javascript css reactjs leaflet react-leaflet

【解决方案1】：

这应该可行。


 return L.divIcon({
  className: "green-icon",
  iconSize: [25, 41],
  iconAnchor: [10, 44],
  popupAnchor: [3, -40],
  html: `<span class="icon-text">${markerNumber}</span>`
})

将此添加到您的 CSS 中。

.icon-text {
  text-align: center;
}

.green-icon {
  display: grid;
  align-items: center;
}

JSfiddle example

【讨论】：

嘿，谢谢！