javascript - css3 动画文字居中对齐

Question

我在自定义文本上有一个 css3 动画。这是一个 fiddle :http://jsfiddle.net/pwLxo78k/

如您所见，文本内容的一部分是静态的(“我爱”)，另一部分是在动画中动态设置的。

我只是想让我的文本居中，但我也希望无论动态文本的长度如何，静态文本(“我爱”)都保持在相同的位置。

是否可以在我的 div 上保留 text-align: center 属性？

谢谢

Answer 1

您可以使用表格来做这样的事情:

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

对于CSS。并使用 div 而不是 span 让 text-align 起作用。这是 DEMO .