Javascript 如何将单词的特定字母水平居中？

我不知道如何在div（而不是整个单词）中集中一个单词的特定字母。我已经用下面的图片说明了这个问题，我想将单词Ipnos的字母N居中：

---

任何帮助都将不胜感激

您可能可以使用

transform:translate（）属性。你可以用你现在正在使用的方法来定位它，并稍微调整单词的位置。
我在单词的容器上使用了这个词，使单词垂直和水平居中：

 display: flex;
 justify-content: center;
 align-items: center;

然后我在单词本身上使用了这种风格，稍微向右移动

  transform: translate(5%);

请参阅下面的代码笔。上面的单词正好居中，第二个单词居中，但向右移动

Codepen:
这里有一种方法可以实现您想要的效果

浅灰色
x轴
和
y轴
仅用于证明N始终保持在容器的中心

容器的第二个版本为伸缩间隔的
提供了一个红色轮廓，以更清楚地显示CSS如何使N始终保持在中心位置

工作示例：


constmydivs=[…document.getElementsByTagName（'div'）；
让divTextArray；
让我们分享内容；
myDivs.forEach（（div）=>{
divTextArray=[…div.textContent]；
divContent=''；
divTextArray.forEach（（字母）=>{
divContent+=''+字母+''；
});
div.innerHTML=divContent；
div.innerHTML+=''；
div.innerHTML+=''；
});
.container{
位置：相对位置；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
宽度：120px；
利润率：12像素；
填充：12px；
边框：1px实心rgb（0,0,0）；
文本转换：大写；
溢出：自动；
调整大小：两者；
}
.货柜跨度{
宽度：20%；
文本对齐：居中；
}
分区：第n个类型（2）跨度{
边框：1px纯红；
}
.x轴，
.y轴{
位置：绝对位置；
背景色：rgb（191191191191）；
}
.x轴{
最高：50%；
左：0；
宽度：100%；
高度：1px；
}
.y轴{
排名：0；
左：50%；
宽度：1px；
身高：100%；
}
调整以下容器的大小。。。
Ipnos
Ipnos
欢迎使用Stack Overflow u请将相关代码添加到您的问题中uu花点时间访问SO帮助中心，特别是“询问”>>你好，鲁宁！这似乎是一个伟大的方式来实现我所期待的！在我接受答案之前，我很难理解它是如何实现的。你能简单解释一下你的方法吗？当然。见我上面的解释。如果您对任何事情有疑问，请继续提出具体问题。谢谢！我接受了你的回答：）