Javascript 更改命令文本align:center在css中相对于的内容

我需要一种方法来围绕一个特定的符号或字符居中（或对齐）文本。文本是通过javascript中添加符号的函数进行的用户输入

我的文本设置为每两个单词换行一次。我在这两个词之间有一个点。我需要将每条线设置为居中，但是相对于它们之间的点，而不是相对于传统的中心。它不一定要精确居中，我只需要让每个点都在另一个点的正下方（周围的文字会相应地移动）。文本正在以连续字符串的形式打印，但它只有换行符才能转到下一行：

我将点本身设置为函数中的一个类。这就是将它们放入其中的函数的外观：。我可以只编辑css中的点，但当我尝试使用css将点居中时，它什么也不做。我想是因为当文本居中时，它不知道如何使文本与点成比例地移动

文本每次都是原创的，所以单词的长度不一致，这就是为什么我需要它相对于don而不是长度的中间

---

如果需要更多信息，请询问我，我很感激能得到帮助：）

用HTML造行，如下所示：

<div><span>longer text</span><span>•</span><span>shrt txt</span></div>
<div><span>shrt txt</span><span>•</span><span>longer txt</span></div>

---

工作示例：

在HTML中生成行，如下所示：

<div><span>longer text</span><span>•</span><span>shrt txt</span></div>
<div><span>shrt txt</span><span>•</span><span>longer txt</span></div>

---

工作示例：

不要试图通过css手动在列中布局单词，只需将单词放入一个

即可

<tr>
  <td>word</td> <!--One word in a left column-->
  <td>.</td> <!--a dot in the center column-->
  <td>word</td> <!--other word in the right column-->
</tr>

演示

var输入='欧洲航天局希望发现国际空间站'；
input=input.match（/\w+\s\w+/g）；
var table=document.createElement（'table'）；
var body=table.createTBody（）；
input.forEach（文本=>{
设cols=text.split（“”）；
设row=body.insertRow（）；
row.insertCell（）.innerText=cols[0]；
row.insertCell（）.innerText='；
row.insertCell（）.innerText=cols[1]；
});
document.body.appendChild（表）
表td：第一个孩子{
文本对齐：右对齐；
}
不要试图通过css手动在列中布局您的单词，只需将您的单词放入
即可

<tr>
  <td>word</td> <!--One word in a left column-->
  <td>.</td> <!--a dot in the center column-->
  <td>word</td> <!--other word in the right column-->
</tr>

演示


var输入='欧洲航天局希望发现国际空间站'；
input=input.match（/\w+\s\w+/g）；
var table=document.createElement（'table'）；
var body=table.createTBody（）；
input.forEach（文本=>{
设cols=text.split（“”）；
设row=body.insertRow（）；
row.insertCell（）.innerText=cols[0]；
row.insertCell（）.innerText='；
row.insertCell（）.innerText=cols[1]；
});
document.body.appendChild（表）
表td：第一个孩子{
文本对齐：右对齐；
}
您可以使用jquery position或offset方法找到点的位置，并根据点的位置移动文本


找到第一个点的左偏移值并将其指定给var x
找到下一个第n个点的左偏移值，并将其指定给var a
如果（Offtwoo>offone）向左移动行（Offtwoo-offone）单位
否则，将线路（关闭一个-关闭两个）单元向右移动

链接到示例-

$（文档）.ready（函数（）{
var x=$（'.dot'）.eq（0）.offset（）.left；
对于（var i=1；ix）{
document.getElementsByClassName（'line'）[i].style.left='-'+（parseInt（a）-parseInt（x））+'px'；
log（“移动-”+（parseInt（a）-parseInt（x）））
}否则{
document.getElementsByClassName（'line'）[i].style.left=（parseInt（x）-parseInt（a））+'px'；
log（“moved”+（parseInt（x）-parseInt（a）））
}
控制台日志（i+“”+a）；
}
})

希望有帮助：）
您可以使用jquery position或offset方法找到点的位置，并根据点的位置移动文本


找到第一个点的左偏移值并将其指定给var x
找到下一个第n个点的左偏移值，并将其指定给var a
如果（Offtwoo>offone）向左移动行（Offtwoo-offone）单位
否则，将线路（关闭一个-关闭两个）单元向右移动

链接到示例-

$（文档）.ready（函数（）{
var x=$（'.dot'）.eq（0）.offset（）.left；
对于（var i=1；ix）{
document.getElementsByClassName（'line'）[i].style.left='-'+（parseInt（a）-parseInt（x））+'px'；
log（“移动-”+（parseInt（a）-parseInt（x）））
}否则{
document.getElementsByClassName（'line'）[i].style.left=（parseInt（x）-parseInt（a））+'px'；
log（“moved”+（parseInt（x）-parseInt（a）））
}
控制台日志（i+“”+a）；
}
})

希望有帮助：）
不要发布代码的图片，它是文本，复制粘贴到您的问题中。只需确保使用“代码”按钮将其正确格式化
{}
不要发布代码的图片，它是文本，复制粘贴到您的问题中。只需确保使用“代码”按钮将其正确格式化。
{}
当文本可以是无限长的单词并作为用户输入时，此方法是否有效？@t-engineer，是的。只要格式保持不变，即单词空间、单词空间等，我使用的正则表达式就会正确地将其拆分。但是，如果格式发生更改，则需要更新。当文本可以是无限长的单词并作为用户输入时，此方法是否有效？@t-engineer，是的。只要格式保持不变，即单词空间、单词空间等，我使用的正则表达式就会正确地将其拆分。如果格式改变了，它将需要更新。我将如何设置它，以便它可以有灵活的文本输入，以便用户可以复制和粘贴自己的文本，并按照需要多次排列，以获得想要的文本，如果您想要的点不在中间，请使用表（见下面的Patrick Evans的答案）。。我如何设置它，使其具有灵活的文本输入，以便用户可以复制和粘贴自己的文本
$(document).ready(function() {
var x = $('.dot').eq(0).offset().left;
for (var i = 1; i < document.getElementsByClassName('dot').length; i++) {

var a = $('.dot').eq(i).offset().left;
if (a > x) {
  document.getElementsByClassName('line')[i].style.left = '-' + (parseInt(a) - parseInt(x)) + 'px';
  console.log("moved -" + (parseInt(a) - parseInt(x)))
} else {
  document.getElementsByClassName('line')[i].style.left = (parseInt(x) - parseInt(a)) + 'px';
  console.log("moved " + (parseInt(x) - parseInt(a)))
}

console.log(i + '   ' + a);
}
})