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

Question

Вертикально повернутый по центру текст с 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 чтобы решить эту проблему.

687 6

css css3 centering vertical-alignment vertical-text

6 ответов:

Comments

Ничего не найдено.

bjnsn · Accepted Answer · 2014-06-20 00:28:13

ключ должен установить положение сверху и слева до 50%, а затем transformX и transformY до -50%.
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}
см.:http://jsfiddle.net/CCMyf/79/

Pascal M · Accepted Answer · 2014-03-20 13:41:45

это может быть немного поздно для ответа на этот вопрос, но я наткнулся на ту же проблему и нашел способ ее достижения, добавив еще один 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;
}
The .inner и display: inline-block; включение rotate и text-align свойства.

вот соответствующая скрипка:http://jsfiddle.net/CCMyf/47/

97ldave · Accepted Answer · 2013-02-28 17:04:12

добавить 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;
}

user3809178 · Accepted Answer · 2016-09-30 13:35:05

ответ от "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 и установка свойства display flex для внутреннего div с align-items:center и justify-content: center properties.
.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/

Michael · Accepted Answer · 2013-02-28 17:05:38

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

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

DarkAjax · Accepted Answer · 2013-02-28 17:08:25

вы можете добавить это:
$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());
на .on('change') функция, как вы можете видеть здесь:http://jsfiddle.net/darkajax/hVhbp/