Pionowo środek obrócony tekst za pomocą CSS

Mam następujący HTML: 

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

div.outer jest wąskim pionowym pasem. Obraca się o 90 stopni. Chciałbym tekst " wyśrodkowany?", aby pojawić się na środku w jego pojemniku div. Nie znam z góry wielkości żadnego div.

To się zbliża: http://jsfiddle.net/CCMyf/2/. widać z jsfiddle, że tekst jest wyśrodkowany pionowo przed zastosowaniem stylu transform: rotate(-90deg), ale jest nieco przesunięty po. Jest to szczególnie zauważalne, gdy div.outer jest krótko.

Czy można wyśrodkować ten tekst pionowo, nie znając z góry żadnego rozmiaru? Nie znalazłem żadnych wartości transform-origin, które rozwiązują ten problem.

Author: danvk, 2013-02-28
Source

6 answers

Kluczem jest ustawienie pozycji top i left na 50%, a następnie transformX i transformY na -50%.

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

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

Zobacz: http://jsfiddle.net/CCMyf/79/

 100
Author: bjnsn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-19 21:28:13

Może być trochę późno na odpowiedź na to pytanie, ale natknąłem się na ten sam problem i znalazłem jakiś sposób na osiągnięcie go, dodając inny div w drodze.

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

I zastosowanie text-align: center na tym środkowym elemencie, wraz z pozycjonowaniem: 

.middle {
    margin-left: -200px;
    width: 400px;
    text-align: center;
    position: relative;
    left: 7px;
    top: 50%;
    line-height: 37px;
}

.inner otrzymuje również display: inline-block;, aby włączyć właściwości rotate i text-align.

Oto odpowiednie skrzypce: http://jsfiddle.net/CCMyf/47/

 5
Author: Pascal M,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-20 11:41:45

Czy możesz dodać margin: 0 auto; do klasy "rotate", aby wyśrodkować tekst.

.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;
}
 2
Author: 97ldave,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-28 15:04:12

Odpowiedź z "bjnsn" jest dobra, ale nie doskonała, ponieważ zawodzi, gdy tekst zawiera w sobie spację. Na przykład użył " Centered?"jako tekst, ale jeśli zmienimy tekst na Niech przypuszczają" wyśrodkowany? lub nie ' to nie będzie działać dobrze i będzie następny wiersz po spacji. Ther nie jest szerokością ani wysokością zdefiniowaną dla wewnętrznego bloku div. 

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

Https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Ale możemy zrobić cały tekst wyśrodkowany wyrównać prawidłowo, ustawiając wewnętrzną szerokość div równa wysokości zewnętrznego div, linia-wysokość wewnętrznego div równa szerokości zewnętrznego div I ustawienie właściwości display flex dla wewnętrznego div z właściwościami align-items: center i 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');
});

Aktualizacja https://jsfiddle.net/touqeer_shakeel/cjL21of5/

 2
Author: user3809178,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-30 10:35:05

Usunięcie : margin-top: -7px; z .inner sprawiło, że pionowo obrócony tekst wyśrodkował dla mnie. Spowodowało to również, że Tekst poziomy nie był wyśrodkowany.

Po prostu usunąć powyższy kod?

 0
Author: Michael,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-28 15:05:38

Możesz dodać to: 

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

Do funkcji .on('change'), Jak widać tutaj: http://jsfiddle.net/darkajax/hVhbp/

 0
Author: DarkAjax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-28 15:08:25