1

テキスト (1 行) を垂直に実行し、左から右、および上から下のコンテナの中央に配置することに固執しています。

ここに画像の説明を入力

CSSでそれを行うにはどうすればよいですか？

4

3 に答える 3

1

プロパティを使用transformして div を回転させます これが css でpadding、垂直方向の中央揃えと横方向の中央揃えをtext-align作成するためのものです。クロスブラウザ ソリューション:

div {
    margin: 50px;
    width: 100px;
    text-align: center;
    height: 50px;
    background: red;
    -moz-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
p {
    margin: auto;
    padding: 15px;
}

ライブデモ: http://jsfiddle.net/YANxZ/

UPD:transformこのジェネレーターで css3 プロパティ ( など) を簡単に編集できます: http://css3generator.com/

于 2013-10-06T20:43:48.880 に答える
0 
text-align:center;
line-height:1000px;
-moz-transform:rotate(-270deg); 
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin:  bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

それが役立つことを願っています:)

于 2013-10-06T20:41:49.067 に答える
0

Firstofall は、回転を実装しようとせずに、テキストを好きなように配置します。

`transform:rotate(-90deg); を適用します。あなたのdivのベンダー仕様とともに

于 2013-10-06T20:47:41.387 に答える