web-dev-qa-db-fra.com

Centrer verticalement le texte pivoté avec CSS

J'ai le code HTML suivant:

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

div.outer Est une bande verticale étroite. div.inner Est pivoté de 90 degrés. Je voudrais le texte "Centré?" apparaître centré dans son conteneur div. Je ne connais pas la taille de l'une ou l'autre div à l'avance.

Ceci est proche: http://jsfiddle.net/CCMyf/2/ . Le jsfiddle vous permet de voir que le texte est centré verticalement avant que le style transform: rotate(-90deg) ne soit appliqué, mais qu'il est légèrement décalé après. Ceci est particulièrement visible lorsque div.outer Est court.

Est-il possible de centrer ce texte verticalement sans connaître aucune des tailles à l'avance? Je n'ai trouvé aucune valeur de transform-Origin Qui résolve ce problème.

csscss3vertical-alignmentcenteringvertical-text
65
danvk

La clé consiste à définir la position supérieure et gauche à 50%, puis à transformerX et à transformerY à -50%.

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

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

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

119
bjnsn

Il est peut-être un peu tard pour répondre à cette question, mais je suis tombé sur le même problème et j'ai trouvé un moyen de le résoudre en ajoutant une autre division.

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

et appliquer un text-align: center sur cet élément central, avec quelques éléments de positionnement:

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

Le .inner obtient également un display: inline-block; pour activer à la fois rotate et text-align Propriétés.

Voici le violon correspondant: http://jsfiddle.net/CCMyf/47/

5
Pascal M

La réponse de 'bjnsn' est bonne mais pas parfaite car elle échoue lorsque le texte contient de l'espace. Par exemple, il a utilisé 'Centré?' comme texte mais si on changeait le texte pour laisser supposer 'Centré? ou pas 'alors cela ne fonctionnera pas bien et prendra la ligne suivante après l'espace. La largeur ou la hauteur ne sont pas définies pour le bloc div interne.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Mais nous pouvons aligner tout le texte au centre correctement, en réglant la largeur de la division interne égale à la hauteur de la division externe, line-height de la division interne égal à la largeur de la division externe et définissant la propriété display flex pour la division interne avec les propriétés align-items: center et justification-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');
});

violon mis à jour https://jsfiddle.net/touqeer_shakeel/cjL21of5/

2
user3809178

Pouvez-vous ajouter margin: 0 auto; à votre classe de "rotation" pour centrer le texte.

.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
97ldave

Retrait: margin-top: -7px; de .inner a centré pour moi le texte pivoté verticalement. Cela a également rendu le texte horizontal non centré.

Il suffit de supprimer le code ci-dessus?

0
Michael

Vous pouvez ajouter ceci:

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

Pour votre fonction .on('change'), comme vous pouvez le voir ici: http://jsfiddle.net/darkajax/hVhbp/

0
DarkAjax