Question

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

我的文字设置为每两个单词换行一次。我在这两个单词之间有一个点。我需要将每条线设置为居中但相对于它们之间的点而不是相对于传统中心。它不必是完全中心我只需要让每个点正好在另一个下面（周围的文本相应地移动）。文本打印为连续字符串，但它只有中断以转到下一行：see this image。

我将点本身设置为函数内的一个类。这就是将函数放入其中的函数：see this image。我可以只编辑css中的点，但是当我尝试使用css使点居中时，它什么都不做。我认为，因为它不知道在文本居中时将文本与点成比例移动。

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

如果需要更多信息，请向我表示感谢获得帮助：）

Answer 1

用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：

span {display: inline-block;}
span:nth-child(1) {width: calc(50% - 15px); text-align: right;}
span:nth-child(2) {width: 30px; text-align: center;}
span:nth-child(3) {width: calc(50% - 15px); text-align: left;}

工作示例：https://codepen.io/anon/pen/WZJQNX

Answer 2

不要试图通过css手动将单词布置在列中，只需将您的单词放入<table>即可。

<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>

然后让左列对齐，右列对齐（默认值）

table td:first-child {
  text-align:right;
}
table td:last-child {
  text-align:left;
}

演示

var input = 'European Space Agency hoping to spot the International Space Station';

input = input.match(/\w+\s\w+/g);

var table = document.createElement('table');
var body = table.createTBody();

input.forEach(text=>{
  let cols = text.split(' ');
  let row = body.insertRow();
  row.insertCell().innerText = cols[0];
  row.insertCell().innerText = '.';
  row.insertCell().innerText = cols[1];
});
document.body.appendChild(table);

table td:first-child {
  text-align:right;
}

Answer 3

您可以使用jquery position或offset方法找到点的位置，并根据点的位置移动文本。

找到第一个点的左偏移值并将其分配给var x
找到下一个第n个点的左偏移值并将其分配给var a
if（offtwo＆gt; offone）移动线（off -wo-offone）单位否则移动线（offone-offtwo）单位

链接到示例 - https://jsfiddle.net/TheTwin/8py75kc0/

$(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);
}
})

希望它有所帮助：）

更改命令text-align：center相对于css的内容

3 个答案: