text-align：センターが動作しないときはposition：absolute with javascript？

Question

私は、スクロールしているコメントセクションを作っています。これは、PHPによってエコーされるいくつかの要素をjavascriptでアニメーション化したトッププロパティを持つことによって機能します。すべてが絶対に自分の位置を設定し、javascriptを同時に使用する場合を除いて、正常に動作しているように見えます。この結果、text-align：centerはテキストに複数の行がある場合のみ動作します。ここに私のコードは次のとおりです。

HTML（大雑把にこのように書き、PHPによってエコーされ、また、インラインスタイリングのために謝罪）

<div id="element0" style="position:absolute;text-align:center;">Hello world!</div> 
<div id="element1" style="position:absolute;text-align:center;">Hello world!</div> 
<div id="element2" style="position:absolute;text-align:center;">Hello world!</div> 
<div id="element3" style="position:absolute;text-align:center;">Hello world!</div> 

はJavascript

var offset = 0; 
var i = 0; 
for(i = 0; i < 3; i++) { 
    obj = document.getElementById("element" + i); 
    obj.style.top = offset + "px"; 
    offset += obj.clientHeight; 
} 

function moveComments() { 
var i1 = 0; 
    for(i1 = 0; i1 < 3; i1++) { 
    obj = document.getElementById("element" + i1); 
    obj.style.top = parseInt(obj.style.top) - 1 + 'px'; 
     if(parseInt(obj.style.top) <= -offset) 
    obj.style.top = offset + 100 + "px"; 
    } 
} 

setInterval(moveComments, 10); 

Answer 1

position: absolute要素の幅が自動的に発生しその内容に合わせて縮小する。

text-align: centerは、ブロック要素の範囲内にテキストを配置します。
ブロック要素がテキストよりも幅が広い場合は、何も行いません。

あなたはより大きな幅を与える必要があります。