jquery - Trying to center a rotated text inside a floated div -

i'd rotate text centered on div.

i trying solution doesn't make me change (position, float , on) on parent divs, , neither deal pixels manually on rotated div (margin, top). there way (best practice) achieve it?

i don't mind browser compatibility, looking best way without modifying structure or fixing lengths

fiddle: http://jsfiddle.net/w5k4j/29/

<div id="parent">     <div id="unknown"></div>     <div id="child">         <h3>click overflowing text i'd 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); } 

fiddle: http://jsfiddle.net/w5k4j/32/

you want inline-block on h3 make box cover length:

h3 {     display: inline-block; } 

and keep text-align: center on parent.

edit: furthermore, need make text centered giving negative left offset half width:

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