html - text-align:center not working when position:absolute with javascript? - Stack Overflow

admin管理员组

文章数量:1279177

I'm making a scrolling ment section, it works by having several elements echoed by php have their top property animated with javascript. Everything seems to be working fine except when I set their position to absolute and use javascript simultaneously, this results in text-align:center only working whenever there is more than one line in the text. Here is my code:

HTML (Roughly goes like this, is echoed through PHP, also apologies for the inline styling)

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

I'm making a scrolling ment section, it works by having several elements echoed by php have their top property animated with javascript. Everything seems to be working fine except when I set their position to absolute and use javascript simultaneously, this results in text-align:center only working whenever there is more than one line in the text. Here is my code:

HTML (Roughly goes like this, is echoed through PHP, also apologies for the inline styling)

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

• javascript
• html
• css

Share Improve this question Follow edited May 25, 2015 at 15:38 Luke asked May 6, 2012 at 13:49 LukeLuke 5,10411 gold badge3838 silver badges5959 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

position: absolute causes the element's width to automatically shrink to fit its content.

text-align: center centers text within the bounds of the block element.
If the block element is not wider than the text, it won't do anything.

You need to give it a larger width.

本文标签： htmltextaligncenter not working when positionabsolute with javascriptStack Overflow