css - css3旋转单词对齐中心

Question

我根据需要使用了完美的 codrops css3 旋转单词，但我无法使出现的单词在中心对齐。我所需要的只是使句子居中对齐，因此旋转单词。

但是因为它的位置是绝对的，并且是向左浮动的，所以这个词从左边 50% 的位置开始。

有人能帮忙吗？我已经尝试了很多实验，但似乎没有任何效果。

这是一个jsfiddle：http: //jsfiddle.net/nzAPr/

Answer 1

将容器设置为 position:relative 并将跨度设置为 100% 似乎有效。

.rw-words{
display: block;
position: relative;
}
.rw-words-1 span{
position: absolute;
width: 100%;
...
}

http://jsfiddle.net/willemvb/9Xubs/

Answer 2

尝试在此处删除缩进：

.rw-words{
    display: block;
    text-indent: 10px;
}

Answer 3

I am not sure if you are still looking for a solution for this. The animation can only set a centre start point and that's why your words show up shiftet to the right. You can fix that if you give every child a negative margin and space it out manually. This is what I got when I was playing around with the code:http://jsfiddle.net/9Xubs/109/ margin-left: -35px;