सीएसएस: रिश्तेदार माता-पिता

Question

के अंदर पूर्ण स्थानित टेक्स्ट केंद्रित करना मैं द्रव सापेक्ष अभिभावक के अंदर पूर्ण स्थानित पाठ कैसे केंद्रित कर सकता हूं? मैं पैरेंट तत्वों पर text-align:center का उपयोग करने की कोशिश कर रहा हूं लेकिन यह हमेशा बच्चे के बाएं कोने को केंद्रित करता है, तत्व नहीं।

http://jsfiddle.net/sucTG/2/

Answer 1

बात यह है कि position:absolute; तत्व की चौड़ाई को संशोधित करता है अपनी सामग्री फिट करने के लिए है, और उस text-align: center; केन्द्रों तत्व ब्लॉक की चौड़ाई के भीतर पाठ। तो यदि आप position: absolute; जोड़ते हैं तो तत्व की चौड़ाई बढ़ाने के लिए मत भूलना, या अन्य text-align: center; संपत्ति बेकार होगी।

इसे हल करने का सबसे अच्छा तरीका है .text अनुभाग में width: 100%; और left: 0px; जोड़ना।

http://jsfiddle.net/27van/

Answer 2

अद्यतन: मैंने पहले बुरा/गलत

http://jsfiddle.net/brJky/1/

इतना करीब तुम क्या चाहते हो जाना चाहिए था कि कौन सी?

आपका टेक्स्ट सापेक्ष है और कंटेनर के अंदर आपके अन्य तत्व पूर्ण हैं!

.text { 
    color:#fff; 
    padding:50px 0; 
    display:block; 
    position:relative; 
} 

.absolute { 
    background:#f0f; 
    height:25px; width:25px; 
    position:absolute; 
    top:36px; left:50%; 
}