CSS内の回転したテキストのCSSセンタリング

私は私に渡されたデザインを設定しています。CSS内の回転したテキストのCSSセンタリング

デザインには、外側のdivの左側に右下に配置する左揃えdiv（class = banner）が必要です。

このdivには回転したテキスト（-90deg）が含まれ、div内に中央揃えとv揃えが必要です。

問題は、このテキストの高さが異なり、長さとフォントが異なる可能性があるということです。

私のCSSを更新して、テキストが常に親divの中心に来るようにする方法はありますか？

.banner 
{ 
    height:90%; 
    width:5%; 
    padding:5%; 
    text-transform: uppercase; 
} 

.rotated 
{ 
    position:relative; 
    float:left; 
    top: 50%; 
    left: 50%; 
    height: 2px; 
    margin-top: -1px; 
    margin-left: -100%; 
    text-align: center; 
    display:inline-block; 
    transform: translateX(-50%) rotate(-90deg); 
    white-space: nowrap; 
}

jsFiddle

出典

2017-02-07 Richard.Gale

質問コードヘルプを探すには、問題**の中で、** [** Stack Snippet **]（https://blog.stackoverflow.com/2014/）のコードを再現するのに必要な最短コードを含める必要があります。 09/introduction-runnable-javascript-css-and-html-code-snippets /）があります。 [**最小限の完全で検証可能な例を作成する方法**]（http://stackoverflow.com/help/mcve） –

https://jsfiddle.net/yz3jL58y/ –

だけ追加します。

display: flex; 
justify-content:center;

#Ticketにプロパティを。 https://jsfiddle.net/yz3jL58y/1/

出典

2017-02-07 12:04:29 pzworks

緑のバナーを残しておきたい緑色の領域の中央に「New」（または任意のテキスト）を配置したい場合は、 –

こちらはフィドルです https://jsfiddle.net/yz3jL58y/2/ – pzworks

Piotrのご協力ありがとうございます。このコードはChromeでうまく機能します。しかし、私はIE9を使用して生産することができる必要があります（これは私たちのプロジェクトにはネイティブです）回転したテキストは別としてすべて動作します（上から下へ）？ –

CSS内の回転したテキストのCSSセンタリング

答えて

関連する問題