0

テキストを回転させて、div の中央に配置したいと思います。

親divで何も変更（位置、フロートなど）せず、回転したdiv（margin、top）でピクセルを手動で処理しないソリューションを試しています。それを達成する方法（ベストプラクティス）はありますか？

ブラウザの互換性は気にしません。構造を変更したり長さを修正したりせずにそれを行うための最良の方法を探しているだけです

フィドル: http://jsfiddle.net/w5K4j/29/

<div id="parent">
    <div id="unknown"></div>
    <div id="child">
        <h3>Click this overflowing text that I'd like to V/H center when rotated</h3>
    </div>
</div>

スタイルシート:

#parent {
    height:300px;
    width:70px;
    float:left;
    border: 1px solid;
}

#unknown {
    float:right;
    height:50px;
    width:20px;
    background-color: yellow
}

#child {
    float:right;
    height:100px;
    width:70px;
    clear:right;
    background-color: orange;
    /*text-align: center;*/
}

h3 {
    /*vertical-align: middle;*/
    white-space:nowrap;
    border: 1px solid;
}

.rotated {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
4

2 に答える 2

1

h3質問はわかりませんが、見出しを中央に揃えたいだけだと思います。

これを行う 1 つの方法は、css プロパティを使用することです。line-height

#child {
    float:right;
    height:100px;
    width:70px;
    clear:right;
    background-color: orange;
    line-height: 50px;
    /*text-align: center;*/
}

必要に応じて変更できます。フィドル: http://jsfiddle.net/w5K4j/31/

于 2013-08-10T13:14:38.700 に答える
1

フィドル: http://jsfiddle.net/w5K4j/32/

inline-blockで、h3そのボックスがその長さをカバーするようにします。

h3 {
    display: inline-block;
}

そしてtext-align: center、親を続けてください。

編集:さらに、幅の半分だけ負の左オフセットを指定して、テキストを中央揃えにする必要があります。

$('h3').css('margin-left', -$('h3').width()/2)
于 2013-08-10T13:18:04.073 に答える