Essayer de centrer un texte pivoté à l'intérieur d'un div flottant

Question

Je voudrais faire pivoter le texte afin qu'il soit centré sur la div. J'essaye une solution qui ne me fait pas changer n'importe quoi (position, float et ainsi de suite) sur des divs parent, et aucun ne traitent des pixels manuellement sur div divisée (marge, dessus). Est-il possible (meilleure pratique) pour y parvenir?

Je ne me dérange pas la compatibilité du navigateur, juste regarder la meilleure façon de le faire sans modifier la longueur la structure ou la fixation

VIOLON: http://jsfiddle.net/w5K4j/29/

<div id="parent"> 
    <div id="unknown"></div> 
    <div id="child"> 
     <h3>Click this overflowing text that I'd like to V/H center when rotated</h3> 
    </div> 
</div> 

Stylesheet:

#parent { 
    height:300px; 
    width:70px; 
    float:left; 
    border: 1px solid; 
} 

#unknown { 
    float:right; 
    height:50px; 
    width:20px; 
    background-color: yellow 
} 

#child { 
    float:right; 
    height:100px; 
    width:70px; 
    clear:right; 
    background-color: orange; 
    /*text-align: center;*/ 
} 

h3 { 
    /*vertical-align: middle;*/ 
    white-space:nowrap; 
    border: 1px solid; 
} 

.rotated { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
} 

Answer 1

Fiddle: http://jsfiddle.net/w5K4j/32/

Vous voulez inline-block sur la h3 pour rendre sa boîte couvrir sa longueur:

h3 { 
    display: inline-block; 
} 

Et gardez text-align: center sur le parent.

EDIT: De plus, vous devez rendre le texte centré en lui donnant un gauche négatif compensé par la moitié de sa largeur:

$('h3').css('margin-left', -$('h3').width()/2) 

Answer 2

Je ne comprends pas votre question, mais je pense que vous voulez simplement aligner votre position h3 sur b e aligné au centre.

Une façon de faire est d'utiliser la propriété css line-height

#child { 
    float:right; 
    height:100px; 
    width:70px; 
    clear:right; 
    background-color: orange; 
    line-height: 50px; 
    /*text-align: center;*/ 
} 

vous pouvez le modifier selon vos besoins. VIOLON: http://jsfiddle.net/w5K4j/31/