Вертикально центрированный текст с CSS

У меня есть следующий 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, которые решают эту проблему.

Ответы

Ответ 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/

Ответ 2

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

Ответ 3

Можете ли вы добавить 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;
}

Ответ 4

Ответ от "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, равную ширине внешнего div, и установив свойство flex отображения для внутреннего div с выравниванием -items: center и justify-content: свойства центра.

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

Ответ 5

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

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

Ответ 6

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

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

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