CSS Centering Rotated Text в div

Я настраиваю дизайн, который я передал мне.CSS Centering Rotated Text в div

Для дизайна необходимо, чтобы левый выровненный div (класс = баннер) располагался справа от левой стороны внешнего div.

Этот div должен содержать повернутый текст (-90deg), который должен быть центрирован и v-выровнять по середине в div.

Проблема заключается в том, что этот текст может иметь разную высоту, а также различную длину и шрифт.

Есть ли способ, которым я могу обновить свой 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/введение-работоспособной-на JavaScript CSS-и-HTML-код-фрагменты /). См. [** Как создать минимальный, полный и проверенный пример **] (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

Я хочу, чтобы зеленый баннер оставался слева, но хотите, чтобы «Новый» (или любой другой текст) был центрирован в зеленой зоне. –

Вот скрипка https://jsfiddle.net/yz3jL58y/2/ – pzworks

Благодарим за помощь Петр. Код работает блестяще - в Chrome. НО, мне нужно иметь возможность создавать с использованием IE9 (так как это является родным для нашего проекта) Все работает отлично, кроме повернутого текста не центрируется (сверху вниз) на баннере (но это в хроме) любые идеи ? –

ответ

Смежные вопросы