Html 如何使文本在地图针标记css中正确对齐？

在这里，我做了一个自定义的地图标记针，里面有文字

我从这个网站上得到了一个有效的例子

我稍微调整了一下代码。但无法正确对齐文本

代码：

正文{
背景：#e6；
}
.别针{
宽度：30px；
高度：30px；
边界半径：50%50%50%0；
背景：#00cae9；
变换：旋转（-45度）；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

---

1

文本内容与父容器一起从

transform:rotate（-45度）

旋转。如果将接点编号包裹在跨距或其他图元中，则只需偏移旋转以适当对齐接点编号

正文{
背景：#e6；
}
.别针{
宽度：30px；
高度：30px；
边界半径：50%50%50%0；
背景：#00cae9；
变换：旋转（-45度）；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.销距{
变换：旋转（45度）；
}

1