텍스트 정렬 : 센터가 작동하지 않을 때 위치 : 절대 자바 스크립트로?

Question

나는 스크롤하는 코멘트 섹션을 만들고 있는데, PHP로 반향을받는 여러 엘리먼트가 자바 스크립트로 애니메이션 된 최상위 속성을 가짐으로써 작동한다. 모든 것은 절대 위치로 설정하고 자바 스크립트를 동시에 사용하는 경우를 제외하고는 정상적으로 작동하는 것으로 보입니다.이 결과는 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> 

자바 스크립트

이

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은 블록 요소의 경계 내에 텍스트를 가운데에 배치합니다.
블록 요소가 텍스트보다 넓지 않은 경우 아무 것도 수행하지 않습니다.

큰 너비로 줄 필요가 있습니다.