CSS를 사용하여 세로 중앙 회전 텍스트

CSS를 사용하여 세로 중앙 회전 텍스트

---

다음 HTML이 있습니다.

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

div.outer좁은 수직 스트립입니다. div.inner90도 회전합니다. "가운데?"라는 텍스트를 원합니다. 컨테이너 div의 중앙에 표시됩니다. 두 div의 크기를 미리 모릅니다.

http://jsfiddle.net/CCMyf/2/ 가 닫힙니다 . jsfiddle에서 transform: rotate(-90deg)스타일이 적용 되기 전에 텍스트가 세로 중앙 에 있지만 그 후에 다소 오프셋 된다는 것을 알 수 있습니다 . 이것은 div.outer짧을 때 특히 두드러 집니다.

크기를 미리 알지 않고도이 텍스트를 세로로 가운데에 배치 할 수 있습니까? transform-origin이 문제를 해결 하는 가치를 찾지 못했습니다 .

---

핵심은 위와 왼쪽 위치를 50 %로 설정 한 다음 transformX 및 transformY를 -50 %로 설정하는 것입니다.

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

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

참조 : http://jsfiddle.net/CCMyf/79/

---

그 질문에 답하기에는 조금 늦었을 수도 있지만 같은 문제를 우연히 발견하고 다른 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/

---

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

---

The answer from 'bjnsn' is good but not perfect as it fails when the text contains space in it. For example he used 'Centered?' as text but if we changed the text to let suppose 'Centered? or not' then it will not work fine and will take the next line after space. Ther is not width or height defined for the inner div block.

.inner {
  font-size: 13px;
  font-color: #878787;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #DDD;
}

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ But we can make the whole text centered align properly, by setting the inner div width equal to height of the outer div, line-height of inner div equal to the width of the outer div and setting the display flex property for inner div with align-items:center and 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');
});

updated fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/

---

Removing : margin-top: -7px; from .inner made the vertically rotated text centered for me. It also made the horizontal text not centered.

Just remove the above code?

---

You could add this:

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

To your .on('change') function, as you can see here: http://jsfiddle.net/darkajax/hVhbp/

참고URL : https://stackoverflow.com/questions/15138723/vertically-center-rotated-text-with-css