Вертикального центр повернутая DIV внутри DIV

Я не понимаю ;-(Вертикального центр повернутая DIV внутри DIV

Я хочу, чтобы отцентрировать DIV с текстом, содержащимся в других делах. Внутренний DIV поворачивается на 90 Degres. До сих пор так . хорошо Моя проблема заключается в том, что я не могу получить внутреннее деление до выравнивания по горизонтали слева от внешнего DIV Как это можно сделать

Here is the fiddle

HTML:.?

<div class="outer"> 
    <div class="inner"> 
     123456789
    </div> 
</div>

CSS:

div { 
    border: 1px solid red;  
} 

.outer { 
    position: absolute; 
    top: 0px; 
    height: 300px; 
    width: 30px; 
} 

.inner { 
    transform: translateX(-50%) translateY(-50%) rotate(90deg); 
    margin-left: 10px; 
    position: relative; 
    top: 50%; 
    text-align: center; 
}

Painted

источник

2015-05-05 dec

вы можете использовать преобразование происхождения, чтобы выбрать место, где выполняется вращение и обновить другие значения: http://jsfiddle.net/r4vrf7pg/4/ –

Ой извините, это только первая половина истории. Я забыл упомянуть, что внешний div должен быть всего около 30 пикселей. (Я добавил стили из ишервуда) – dec

И граница инфина div должна включать весь текст. – dec

Установите внутренний div на position:absolute.

http://jsfiddle.net/r4vrf7pg/8/

div { 
 
    border: 1px solid red; 
 
} 
 
.outer { 
 
    position: absolute; 
 
    top: 0px; 
 
    height: 300px; 
 
    width: 30px; 
 
} 
 
.inner { 
 
    transform: translateX(-50%) translateY(-50%) rotate(90deg); 
 
    margin-left: 10px; 
 
    position: absolute; 
 
    top: 50%; 
 
    text-align: center; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
     123456789
 
    </div> 
 
</div>

источник

2015-05-05 19:54:34 Stickers

EDIT: Так что это не будет работать, если вы планируете сделать больше из них с разной ширины, но для прямо сейчас, если я просто добавить margin-left: -72px; к .inner класса он выравнивается слева от внутренней части деления .outer.

.inner { 
    transform: translateY(-50%) rotate(90deg); 
    position: relative; 
    top: 50%; 
    margin-left: -72px; 
    text-align: center; 
    width: auto; 
}

источник

2015-05-05 19:24:23

Возможно, нужно добавить некоторую ширину в .outer, но я не верю, что она такая же широкая, как и изначально. –

.inner { 
    ... 
    transform: translateX(-50%) translateY(-50%) rotate(90deg); 
    margin-left: 10px; 
}

Demo

Есть, вероятно, более простые способы решения этой задачи. Я думаю, что поворот родительского элемента устранит некоторую сложность.

источник

2015-05-05 19:25:07 isherwood

Вертикального центр повернутая DIV внутри DIV

ответ

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