0

Web サイトの縦書きテキストが必要です。それは私のcssコードです：

.vertical-category  span {

    display: block;
    position: absolute;
    top: 30px;
    left: -37px;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

それはうまくいきますが、最初の文字の開始位置は単語の長さに依存します:

左: 小さい単語、右: 長い単語

ご覧のとおり、左側の縦書きテキストは赤い背景の上にあります。右側の縦書きは長く、赤い背景ではありません。

縦書きテキストの位置が常に固定され、テキストの長さに依存しないようにするにはどうすればよいですか?

4

1 に答える 1

1

詳細なコンテキスト (たとえば、その背景色がどこから来ているのかなど) がなければ、完全に確認することは困難ですが、この問題はあなたのtransform-origin. 1 つ目50%は、要素を右に移動することです。0 またはいくつかの静的な値を試してください:

transform-origin: 0 50%;

http://jsfiddle.net/dAUrF/

編集: このフィドルは、何が起こっているかを視覚化するのに役立ちます。赤い要素が回転前の要素で、黄色が回転後の要素です。原点の値を微調整して、回転にどのように影響するかを確認します。

transform-origin回転が発生するポイントを定義します。要素の中心を中心に50% 50%回転が発生します。

于 2013-11-08T21:46:27.907 に答える