एक div

Question

के मध्य में घुमावदार पाठ को संरेखित कैसे करें I नीचे की छवि की तरह 100% ऊंचाई div के मध्य में घुमावदार पाठ को लंबवत संरेखित करना चाहते हैं।

तो जब भी स्क्रीन आकार बदलता है तो पाठ div के बीच में रहता है।

किसी के पास इसका समाधान है?

http://jsfiddle.net/SVkPU/1/

.rotate-270 { 
    -o-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    transform:rotate(270deg); 
} 

.left { 
    float:left; 
    background:#000; 
    color:#fff; 
    text-align:center; 
    height:50px; 

} 

.right { 
    float:right; 
    background:#000; 
    color:#fff; 
} 

Answer 1

यह मेरे लिए काम किया: http://davidwalsh.name/css-vertical-text

भी flexboxes का उपयोग करने की कोशिश की। लेकिन चूंकि वे (अभी भी) सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं हैं (विशेष रूप से) (मोबाइल) सफारी - जिस पर इसे काम करना चाहिए, मैं एक और अधिक समर्थित दृष्टिकोण के साथ जाता हूं।

Answer 2

खैर बडी बजाय 90 डिग्री पर पाठ घूर्णन की <div> की text-align:center और जोड़े तो! 90 डिग्री पर <div> घुमाएं!

http://jsfiddle.net/KSAqR/1/