सामग्री (और 100% नहीं) पर आधारित चौड़ाई और ऊंचाई के साथ तय स्थिति

Question

मेरे पास एक कंटेनर डीआईवी "स्थिति: निश्चित" पर सेट है, जिसमें पूर्ण स्थिति में एक और div सेट शामिल है।

क्या कोई तरीका है कि मैं इसे शामिल करने के लिए चौड़ाई और ऊंचाई के साथ div को शामिल कर सकता हूं, और हमेशा 100% नहीं?

यह है कि मैं क्या है: (मैन्युअल रूप से चौड़ाई/ऊंचाई निर्धारित करने की आवश्यकता नहीं होती) http://jsfiddle.net/3BYPu/: http://jsfiddle.net/ydSqU/

<div class="transparent_background"> 
    <div id="window">hello.</div> 
</div> 

यह मैं चाहते हैं क्या है।

<div class="transparent_background"> 
    <div id="window" style="width:30px; height:30px">hello.</div>  
</div> 

Answer 1

aur0n,

यदि संभव हो, यह करने के लिए सबसे अच्छा और आसान तरीका है जावास्क्रिप्ट का उपयोग करने के ऊंचाई और तत्वों की चौड़ाई की गणना करने के फिर उसके अनुसार भीतरी तत्व की स्थिति है।

इसे पूरा करने के लिए, आप बस युक्त तत्व की चौड़ाई लेते हैं और इसे दो से विभाजित करते हैं, फिर left आंतरिक तत्व के मान को उस आधे से कम अपनी आधा चौड़ाई निर्धारित करें। फिर, ऊंचाई के लिए वही करें।

इसके अलावा, आप जो चीजों को याद कर सकते हैं उनमें से एक यह है कि आपका आंतरिक div position: relative और display: inline पर सेट होना चाहिए। आपके div को युक्त तत्व की चौड़ाई से मेल खाने का कारण यह है कि position: absolute सामान्य प्रवाह से तत्व लेता है, जबकि position: relative इसे सामान्य प्रवाह में छोड़ देता है।

यहाँ कोड मैं का इस्तेमाल किया (jQuery का उपयोग) है:

// centering the width 
$("#window").css("left", ($(".transparent_background").width()/2)-($("#window").width()/2) + "px"); 
// centering the height 
$("#window").css("top", ($(".transparent_background").height()/2)-($("#window").height()/2) + "px"); 

इस समाधान के साथ, आप मैन्युअल रूप से चौड़ाई और ऊंचाई निर्धारित करने की जरूरत नहीं है। साथ ही, पाठ की कई पंक्तियों के साथ एक आंतरिक div होने में कोई समस्या नहीं होगी।

बेला: http://jsfiddle.net/ydSqU/3/

Answer 2

@ aur0n इस

#window { 
     border:2px dotted red; 
     background:white; 
     position: absolute; 
     clear:both; 
    } 

Answer 3

आप नीचे दिए गए प्रयास कर सकते हैं की तरह सीएसएस बदलने के लिए,

#window { 
    border:2px dotted red; 
    background:white; 
    width:50%; 
    height:auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -25%; 
    vertical-align:center; 

} 

Answer 4

इस प्रयास करें:

#window { 
border:2px dotted red; 
background:white; 
position: absolute; 
display: inline-block; 
height: 1.2em; 
line-height: 1.2em; 
top: 50%; 
margin-top: -0.6em; 
margin: auto; 

}

http://jsfiddle.net/3BYPu/1/