मैं एक रूपांतरित और घुमावदार div कैसे केंद्रित करूं?

Question

मैं इस HTML तालिका में से एक और तीन कॉलम में "एबीसी" और "एबीसीडीएफजीएचजेजे" टेक्स्ट कैसे केंद्रित करूं? मैंने एचटीएमएल टैग टेक्स्ट-एलाइन की कोशिश की, लेकिन मुझे लगता है कि अनुवाद उस संरेखण को रोक रहा है।

td.rotate div { 
 
    transform: translate(68px, 55px) rotate(270deg); 
 
    white-space: nowrap; 
 
    height: 150px; 
 
    translate-origin: left top; 
 
    width: 25px; 
 
    text-align: center; 
 
}

<table border="2px"> 
 
    <tr> 
 
    <td class="rotate"> 
 
     <div>ABC</div> 
 
    </td> 
 
    <td>123</td> 
 
    <td class="rotate"> 
 
     <div>ABCDEFGHIJ</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

आप इस जादू स्निपेट के साथ पूरी तरह से सब कुछ केंद्रित कर सकता है: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

यह रूप में अच्छी तरह इस मामले में काम करता है। बच्चे divs में position: absolute होगा, इसलिए हमें माता-पिता के लिए position: relative सेट करना होगा ताकि वे इसके अपेक्षाकृत स्थान पर हों, और माता-पिता को चौड़ाई और ऊंचाई निर्धारित करने की आवश्यकता हो क्योंकि सामग्री स्वचालित रूप से इसे सेट नहीं करेगी।

td.rotate { 
 
    position: relative; 
 
    height: 150px; 
 
    width: 15px; 
 
} 
 

 
td.rotate div { 
 
    transform: translate(-50%, -50%) rotate(270deg); 
 
    white-space: nowrap; 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
    text-align: center; 
 
}

<table border="2px"> 
 
    <tr> 
 
     <td class="rotate"> 
 
      <div>ABC</div> 
 
     </td> 
 
     <td>123</td> 
 
     <td class="rotate"> 
 
      <div>ABCDEFGHIJ</div> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

ठीक है तो बजाय अपने कोड manupulating, मैं एक जोड़े को कदम पीछे गए और somethings दुबारा लिखा, चातुर्य में अपने सामान्य संरचना रखने की कोशिश कर। क्या होगा, आपके द्वारा लिखे घूर्णन वाले सीएसएस की बजाय, हमने पाठ के साथ <div> पर केवल एक साधारण transform: rotate(-90deg); की तरह कुछ किया। फिर बस थोड़ा सा <td> टैग की ऊंचाई बढ़ाएं।

एचटीएमएल

<table border="2px"> 
    <tr> 
    <td> 
     <div class="rotateText">ABC</div> 
    </td> 
    <td>123</td> 
    <td> 
     <div>ABCDEFGHIJ</div> 
    </td> 
    </tr> 
</table> 

सीएसएस

.rotateText{ 
    -webkit-transform: rotate(-90deg);  
-moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
transform: rotate(-90deg); 
} 
td{ 
    height:100px; 
} 

और अंत में, JS JIDDLE

Answer 3

तुम भी उपयोग कर सकते हैं writing-mode

https://www.w3.org/TR/css-writing-modes-3/ सार

सीएसएस लेखन मोड स्तर 3 जैसे विभिन्न अंतरराष्ट्रीय लेखन मोड, के लिए सीएसएस समर्थन को परिभाषित करता है बाएँ-से-सही (जैसे लैटिन या इंडिक), दाएं से बाएं (जैसे हिब्रू या अरबी), बिडरेक्शनल (उदा। मिश्रित लैटिन और अरबी) और लंबवत (जैसे एशियाई स्क्रिप्ट)।

td.rotate div { 
 
    white-space: nowrap; 
 
    height: 150px; 
 
    width: 25px; 
 
    text-align:center; 
 
    -webkit-writing-mode: vertical-lr; 
 
    /* old Win safari */ 
 
    writing-mode: vertical-rl; 
 
    writing-mode: tb-lr; 
 
    /* writing-mode:sideways-lr;should be the one */ 
 
    /* eventually untill sideways-lr is working everywhere we can use transform , comment or remove next line to understand what it does :) */ 
 
    transform: scale(-1, -1); 
 
}

<table border="2px"> 
 
    <tr> 
 
    <td class="rotate"> 
 
     <div>ABC</div> 
 
    </td> 
 
    <td>123</td> 
 
    <td class="rotate"> 
 
     <div>ABCDEFGHIJ</div> 
 
    </td> 
 
    </tr> 
 
</table>