web-dev-qa-db-ja.com

CSSを使用して垂直方向に中央に回転したテキスト

次のHTMLがあります。

_<div class="outer">
    <div class="inner rotate">Centered?</div>
</div>
_

_div.outer_は狭い垂直ストリップです。 _div.inner_は90度回転します。 「Centered？」というテキストが欲しいコンテナdivの中央に表示されます。どちらのdivのサイズも事前にわかりません。

これは近づいています： http://jsfiddle.net/CCMyf/2/ 。 jsfiddleから、テキストはtransform: rotate(-90deg)スタイルが適用される前に垂直方向に中央揃えされますが、その後多少オフセットされることがわかります。これは、_div.outer_が短い場合に特に顕著です。

事前にサイズを知らなくても、このテキストを垂直方向に中央揃えできますか？この問題を解決する_transform-Origin_の値は見つかりませんでした。

csscss3vertical-alignmentcenteringvertical-text
65
danvk

重要なのは、位置の上下を50％に設定してから、transformXとtransformYを-50％に設定することです。

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

参照： http://jsfiddle.net/CCMyf/79/

119
bjnsn

その質問に答えるのは少し遅れるかもしれませんが、私は同じ問題に出くわし、途中で別のdivを追加することでそれを達成する方法を見つけました。

<div class="outer">
    <div class='middle'><span class="inner rotate">Centered?</span></div>
</div>

中央の要素にtext-align: centerを適用し、いくつかの位置決め要素を追加します。

.middle {
    margin-left: -200px;
    width: 400px;
    text-align: center;
    position: relative;
    left: 7px;
    top: 50%;
    line-height: 37px;
}

.innerもdisplay: inline-block;を取得して、rotateプロパティとtext-alignプロパティの両方を有効にします。

対応するフィドルは次のとおりです。 http://jsfiddle.net/CCMyf/47/

5
Pascal M

'bjnsn'からの回答は良いですが、テキストにスペースが含まれていると失敗するため、完璧ではありません。たとえば、彼は「Centered？」を使用しました。テキストとしてですが、テキストを変更して「中央揃え？またはそうでない場合、それはうまく動作せず、スペースの後に次の行を取ります。 Therは、内側のdivブロックに定義された幅でも高さでもありません。

.inner {
  font-size: 13px;
  font-color: #878787;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #DDD;
}

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ しかし、内側のdivの幅を外側のdivの高さ、内側のdivのline-heightに等しく設定することで、テキスト全体を適切に揃えることができます外部divの幅に等しく、align-items：centerおよびjustify-content：centerプロパティで内部divの表示flexプロパティを設定します。

.inner {
  font-size: 13px;
  font-color: #878787;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content:center;
  align-items:center;
  line-height:40px;
}
$('#height').on('change', function(e) {
  $('.outer').css('height', $('#height').val() + 'px');
  $('.inner').css('width', $('#height').val() + 'px');
});

更新されたフィドル https://jsfiddle.net/touqeer_shakeel/cjL21of5/

2
user3809178

margin: 0 auto;を「回転」クラスに追加して、テキストを中央に配置できますか。

.rotate {
  -webkit-transform: rotate(-90deg);
  -ff-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 16px;  /* transform: rotate() does not rotate the bounding box. */
  margin: 0 auto;
}
2
97ldave

削除：margin-top: -7px; from .inner垂直に回転したテキストを中央に配置しました。また、水平テキストが中央に配置されなくなりました。

上記のコードを削除するだけですか？

0
Michael

これを追加できます：

_$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());
_

.on('change')関数には、次のように表示されます： http://jsfiddle.net/darkajax/hVhbp/

0
DarkAjax