Javascript css3动画文本对齐中心

我有一个自定义文本上的css3动画。这是一把小提琴：

如您所见，文本内容的一部分是静态的，我喜欢，而另一部分是在动画中动态设置的

我只想让我的文本居中，但我也希望我喜欢的静态文本保持在相同的位置，不管动态文本的长度如何

是否可以在我的div上保留文本align:center属性

谢谢

试试这个： 无职位： CSS:

演示：

与定位。 CSS:

演示：

您可以将表格用于以下内容：

<table style="width: 100%">
    <tr style="width: 100%">
        <td style="width: 50%">
            <div id="fixedspan">I love</span>
        </td>
        <td>
            <div id="movingspan" class="moving">you</span>
        </td>
    </tr>
</table>

对于css。并使用div而不是span使文本对齐。这是我的建议

---

我担心使用文本对齐：居中是不可能的，所以请尝试使用填充或边距，或者使用位置，无论如何，如果我正确理解了这个问题，这里有一把小提琴。谢谢，我会尽快试一试如果你调整页面的大小，位置将不会完全居中。不完全。你改变了整个计划HTML@RaeenHashemi随便你！应该注意的是，这不是一场游戏。重点是帮助提问者。

#divHeader {
    text-align: center;
    width: 100%;
    position:relative;
}
#fixedspan {
    position:absolute;
    left:40%;
    width:38px;
}
#movingspan {
    position:absolute;
    left:calc(40% + 38px); //adjust the position based on width of "I love"
    margin:0 2px;
}

<table style="width: 100%">
    <tr style="width: 100%">
        <td style="width: 50%">
            <div id="fixedspan">I love</span>
        </td>
        <td>
            <div id="movingspan" class="moving">you</span>
        </td>
    </tr>
</table>

#fixedspan {
    text-align: right;
}

#movingspan {
    text-align: left;
}

#divHeader {
text-align: center;
width:35%;
margin:0 auto;
}


#fixedspan {
   float:left;
}