84

私は次のHTMLを持っています： 

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

div.outer細い縦の帯です。div.inner90度回転します。「中央揃え？」というテキストが欲しいのですが。コンテナdivの中央に表示されます。どちらのdivのサイズも事前にわかりません。

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

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

4

7 に答える 7

166

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

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

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

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

于 2014-06-19T21:28:13.303 に答える
6

その質問に答えるのは少し遅いかもしれませんが、私は同じ問題に遭遇し、途中で別の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;rotatetext-align

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

于 2014-03-20T11:41:45.810 に答える
3

テキストを90度回転し、軸Yを中心とする別のオプションは次のとおりです。

.rotate-centered {
    top: 50%;
    right: 50%;
    position: absolute;
    transform: scale(-1) translate(-50%, 50%);
    writing-mode: vertical-lr;
 }

<span class="rotate-centered">Text<span>

例：https ：//codepen.io/wwwebman/pen/KKwqErL

しかし、IE / EDGEのサポートが悪いため、writing-modeそこでは機能しません： https ://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

于 2019-12-26T19:17:15.970 に答える
2

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;
}
于 2013-02-28T15:04:12.023 に答える
2

'bjnsn'からの答えは良いですが、テキストにスペースが含まれていると失敗するため、完全ではありません。たとえば、彼は「中央揃え？」を使用しました。テキストとしてですが、「中央揃え」と仮定するようにテキストを変更した場合はどうなりますか？またはそうでない場合は、正常に機能せず、スペースの後に次の行が表示されます。内側の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の行の高さを外側の幅に等しく設定することで、テキスト全体を適切に中央揃えにすることができます。 divと、align-items：centerおよびjustify-content：centerプロパティを使用して内部divのdisplayflexプロパティを設定します。

.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/

于 2016-09-30T10:35:05.077 に答える
0

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

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

于 2013-02-28T15:05:38.100 に答える
0

これを追加できます：

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

あなたがここで見ることができるように、あなたの.on('change')関数に：http: //jsfiddle.net/darkajax/hVhbp/

于 2013-02-28T15:08:25.287 に答える