केंद्र एक div के अंदर एक div - केंद्र

Question

मैं संरेखित पाठ के साथ एक टैब बना रहा हूं - मैं एक div को दूसरे के अंदर केंद्रित करने की कोशिश कर रहा हूं, हालांकि मैं चाहता हूं कि divs के केंद्रों को गठबंधन किया जाए लेकिन मुझे मिल रहा है संरेखण मुद्दों:

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;"> 
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA"> 
    <div style="position:relative;top:50%">  
     <span style=" font-weight:bold;color:white;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);display:block;">International</span> 
    </div> 
    </div> 
</div> 

मैं एक बड़ा माता पिता div के अंदर एक div खड़ी ताकि मेरे घुमाया पाठ केंद्रित है कैसे केंद्रित कर सकता है?

Answer 1

ट्रांसफॉर्मेशन तत्वों को उनके केंद्र बिंदु से घुमाते हैं, इसलिए आपको परिवर्तनों से पहले अपने साइडबार के केंद्र में अपने <span> के केंद्र की स्थिति की आवश्यकता होती है।

सबसे पहले, आपको top:50% रैपर div की आवश्यकता नहीं है, आप इसे पूरे समय कर सकते हैं।

• परिवर्तनों और किसी भी अतिरिक्त शैलियों से पहले, आपकी अवधि आपकी साइडबार के ऊपरी बाएं कोने में दिखाई देगी।

• width:500px जोड़ें। केंद्र को सटीक रूप से स्थिति देने के लिए, 500px कहें, अवधि को चौड़ाई तय करनी चाहिए। हम मानते हैं कि कोई भी टेक्स्ट कभी भी लंबा नहीं होगा।

• text-align:center जोड़ें। अब पाठ हमारे निश्चित चौड़ाई अवधि में सही ढंग से केंद्रित है, हालांकि अवधि स्वयं गलत स्थिति में है।

• position:relative जोड़ें, इसलिए हम अपनी मूल स्थिति के सापेक्ष अवधि की स्थिति को ट्विक कर सकते हैं।

• top:50% और margin-top:-10px जोड़ें। चूंकि 50% शीर्ष किनारे सेट करते हैं, इसलिए हमें लंबवत अवधि के केंद्र में नकारात्मक शीर्ष मार्जिन के साथ क्षतिपूर्ति करने की आवश्यकता होती है। 10px अवधि की ऊंचाई का आधा है।

• left:50% और margin-left:-250px, ऊपर जैसा ही है, क्षैतिज अवधि को केंद्रित करता है। 250px अवधि की निश्चित चौड़ाई का आधा है।

• अंत में अपने परिवर्तन जोड़ें, और इसे ठीक से केंद्रित किया जाना चाहिए।

परिणामस्वरूप HTML:

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;"> 
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA"> 
     <span style="font-weight:bold;color:white;display:block;text-align:center;width:500px;position:relative;top:50%;margin-top:-10px;left:50%;margin-left:-250px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);">International</span> 
    </div> 
</div> 

डेमो: http://jsfiddle.net/jHrEm/7/