0

我正在制作一个滚动评论部分，它通过让几个由 php 回显的元素使其 top 属性使用 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);
4

1 回答 1

12

position: absolute使元素的宽度自动缩小以适应其内容。

text-align: center在块元素的范围内居中文本。
如果块元素不比文本宽，它不会做任何事情。

你需要给它更大的宽度。

于 2012-05-06T13:51:52.853 回答