Verticaal geroteerde tekst centreren met CSS

Ik heb de volgende HTML:

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

div.outeris een smalle verticale strook. div.inneris 90 graden gedraaid. Ik wil graag de tekst “Gecentreerd?” gecentreerd verschijnen in de container div. Ik weet van tevoren niet hoe groot beide div’s zijn.

Dit komt in de buurt: http://jsfiddle.net/CCMyf/2/. Je kunt aan de jsfiddle zien dat de tekst verticaal gecentreerd is voordat de stijl transform: rotate(-90deg)wordt toegepast, maar daarna enigszins wordt verschoven. Dit is vooral merkbaar wanneer div.outerkort is.

Is het mogelijk om deze tekst verticaal te centreren zonder vooraf de afmetingen te kennen? Ik heb geen waarden gevonden van transform-origindie dit probleem oplossen.

Antwoord 1, autoriteit 100%

De sleutel is om de positie boven en links in te stellen op 50% en vervolgens transformX en transformY naar -50%.

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}
.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

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

Antwoord 2, autoriteit 4%

Het is misschien een beetje laat om die vraag te beantwoorden, maar ik stuitte op hetzelfde probleem en vond een manier om dit te bereiken, door nog een div toe te voegen.

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

en een text-align: centertoepassen op dat middelste element, samen met wat positioneringsdingen:

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

De .innerkrijgt ook een display: inline-block;om zowel rotateals text-aligneigenschappen.

Hier is de bijbehorende viool: http://jsfiddle.net/CCMyf/47/

Antwoord 3

Kun je margin: 0 auto;toevoegen aan je “rotate” class om de tekst te centreren.

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

Antwoord 4

Het antwoord van ‘bjnsn’ is goed, maar niet perfect omdat het faalt wanneer de tekst ruimte bevat. Hij gebruikte bijvoorbeeld ‘Centered?’ als tekst, maar als we de tekst zouden wijzigen om ‘Gecentreerd? of niet’, dan zal het niet goed werken en zal het de volgende regel na spatie innemen. Er is geen breedte of hoogte gedefinieerd voor het binnenste div-blok.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/
Maar we kunnen de hele tekst goed gecentreerd uitlijnen, door de breedte van de binnenste div gelijk te stellen aan de hoogte van de buitenste div, de regelhoogte van de binnenste div gelijk aan de breedte van de buitenste div en de eigenschap display flex in te stellen voor de binnenste div met align -items:center en rechtvaardigen-content:center eigenschappen.

.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');
});

viool bijgewerkt https://jsfiddle.net/touqeer_shakeel/cjL21of5/

Antwoord 5

De andere optie om tekst 90 graden te roteren en te centreren op as Y is:

.rotate-centered {
    top: 50%;
    right: 50%;
    position: absolute;
    transform: scale(-1) translate(-50%, 50%);
    writing-mode: vertical-lr;
 }

<span class="rotate-centered">Text<span>

Voorbeeld: https://codepen.io/wwwebman/pen/KKwqErL

Maar vanwege slechte ondersteuning in IE/EDGE werkt de writing-modedaar NIET:
https://developer.mozilla.org/en-US/ docs/Web/CSS/schrijfmodus

Antwoord 6

Verwijderen: margin-top: -7px;van .innermaakte de verticaal geroteerde tekst voor mij gecentreerd. Het maakte ook de horizontale tekst niet gecentreerd.

Alleen de bovenstaande code verwijderen?

Antwoord 7

Je zou dit kunnen toevoegen:

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

Naar uw functie .on('change'), zoals u hier kunt zien: http://jsfiddle.net/darkajax/hVhbp/