Html 将文本与文本中心对齐作为参考点

我有一些文本，我正试图在图表上移动的记号下对齐。我可以通过以下操作使其与滴答声保持一致：

<div class="foo">Text</div>
.foo {
  width: $tick-location px;
  text-align: right;
}

---

第一个是我目前得到的。第二个是我想要的。

使用transform进行文本居中。最好更改

左侧

，而不是更改“宽度”

.foo{
位置：相对位置；
显示：内联块；
宽度：自动；
左：100px；
/*这里文本的中心是100px*/
/*左：$勾选位置px*/
转化：translateX（-50%）；
}

---

Text

可能有javascript解决方案。

var b=$（“.longerdiv”）.html（）.length；
var a=$（“.foo”）.html（）.length；
$（“.foo”）.抵销({
左：b*3.02
});
.foo{
宽度：20像素；
}

------------|------
Text
我已经创建了一个您正在尝试的示例。希望这能奏效


var e=document.getElementById（“animatedElement”）；
var s=1；
var timer=setInterval（函数（）{
var ePosition=e.offsetLeft；
e、 style.left=（ePosition+10）+'px'；
}, 1000);
setTimeout（（）=>{clearInterval（timer）；}，45000）
.foo{
宽度：50px；
文本对齐：居中；
边框顶部：5px实心#000；
}
#动画元素{
位置：绝对位置；
顶部：5px；
左：10px；
宽度：25px；
高度：25px；
背景：红色；
}
梅因迪夫先生{
宽度：500px；
高度：200px；
背景色：#e8dbff；
边框：2倍实心#000；
}
.divWithTick{
宽度：50px；
高度：30px；
背景色：#fff；
}
.滴答声{
宽度：2%；
高度：30px；
背景颜色：蓝色；
保证金：0自动；
}

正文
你能添加一张图片来显示你想做什么吗？
$tick location
，在php中尝试一些东西吗？不，我只是把它放在那里作为读者的标记。实际上，它是一个直接在HTML模板中设置的角度省道变量。柴坦尼亚：请问我可以知道您使用的是哪种记号吗？它是样式化的div还是图像？
----------|-----
     xxxxx

----------|-----
        xxxxx