コマンドtext-align：centreとcssの相対位置を変更する

Question

特定の記号や文字の周囲にテキストを配置する方法が必要です。テキストは、シンボルを追加するjavascriptの関数を経由するユーザー入力です。

2単語ごとに改行が設定されているテキストがあります。私はこれらの2つの単語の間に点を持っています。私は、各ラインをセンタリングされるように設定する必要があります。それはまさに中心である必要はありません。私はちょうどお互いのすぐ下にそれぞれのドットを持っている必要があります（それに応じて動く周囲のテキストで）。テキストは連続した文字列として印刷されていますが、次の行に移動するための区切りがあります：see this image。

私はドットそのものを関数内のクラスとして設定しています。これは、関数が次のように表示されます。see this image。私はCSSのドットだけを編集することができますが、私はドットを中心にするためにCSSを使用しようとすると何もしません。私はそれが中心に置かれているときにドットに比例してテキストを動かすことを知らないので、私は思う。

テキストは毎回オリジナルですので、単語の長さが一貫しないため、長さの中央ではなく相対的にする必要があります。

詳しくはちょうど私が助けを得ることが感謝だよ頼む:)

Answer 1

することができますを持っていますjquery positiを使ってドットの位置を見つけるonまたはoffsetメソッドを使用して、ドットの位置に従ってテキストを移動します。

• 最初のドットの左オフセット値を検索し、VAR X
• 次のn番目のドットの左オフセット値を検索し、
• IF（offtwo> offone）移動をVARに割り当てに割り当てライン（offtwo - offone） - 単位の例に右

リンク - https://jsfiddle.net/TheTwin/8py75kc0/

ユニットは、ライン（offtwo offone）を移動させる他 を残し

助けて欲しいと思っています。

Answer 2

このように、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 3

あなたの言葉をレイアウトしようとする代わりに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; 
 
}