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

これに対する解決策をまだ探しているかどうかはわかりません。アニメーションは中央の開始点しか設定できないため、単語は右側にシフトして表示されます。すべての子供に負のマージンを与え、手動でスペースを空けると、これを修正できます。これは、コードをいじっていたときに得たものです: http://jsfiddle.net/9Xubs/109/ margin-left: -35px;