Вертикально центр повернут текст с помощью CSS

Question

У меня есть следующий HTML:

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

div.outer является узкой вертикальной полосой. div.inner повернут на 90 градусов. Мне нужен текст «Центрированный?» чтобы оказаться центрированным в своем контейнере div. Я не знаю размер div заранее.

Это близко: http://jsfiddle.net/CCMyf/2/. Вы можете видеть из jsfiddle, что текст вертикально центрирован до применения стиля transform: rotate(-90deg), но после этого несколько смещается. Это особенно заметно, когда div.outer является коротким.

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

Answer 1

Ключ для установки положения верхней и влево до 50%, а затем transformX и transformY до -50%.

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

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

см: http://jsfiddle.net/CCMyf/79/

Answer 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; 
} 

Answer 3

Удаление: margin-top: -7px; из .inner сделал вертикально повернутый текст центрированный для меня. Он также сделал горизонтальный текст не центрированным.

Просто удалите вышеуказанный код?

Answer 4

Вы можете добавить это:

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

К вашему .on('change') функции, как вы можете увидеть здесь: http://jsfiddle.net/darkajax/hVhbp/

Answer 5

Это может быть немного поздно для ответа на этот вопрос, но я наткнулся на тот же вопрос и нашел какой-то способ его достижения, добавив еще один 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/

Answer 6

Ответ от «bjnsn» это хорошо, но не идеально, как он терпит неудачу, когда текст содержит пространство в нем. Например, он использовал «Центрированный»? как текст, но если мы изменили текст, чтобы позволить «Центрировать? или нет ", тогда он не будет работать нормально и займет следующую строку после пробела. 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 равна ширине внешних сНа и настроек свойство flex flex для внутреннего div с элементами align: center и justify-content: center.

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