स्क्रीन पर अज्ञात आकार क्षैतिज और लंबवत के साथ एक डीआईवी कैसे केन्द्रित करें

मुझे क्षैतिज और लंबवत दोनों केंद्र स्क्रीन पर एक डीआईवी केंद्र करने की आवश्यकता है, मुझे डीआईवी आकार नहीं पता है, और div position:fixed; है।स्क्रीन पर अज्ञात आकार क्षैतिज और लंबवत के साथ एक डीआईवी कैसे केन्द्रित करें

यह नकारात्मक मार्जिन चाल काम नहीं करती है, क्योंकि मुझे div आकार नहीं पता है। top:50%; left:50%; magin-top:-100; margin-left:-100;

margin-left: auto; margin-right: auto; क्योंकि काम नहीं करता है position:fixed; और margin-top:auto; margin-bottom:auto; साथ काम नहीं करता भी खड़ी केंद्र नहीं करता है,

मुझे पता चला कि यह विधि: display: table-cell; vertical-align: middle; ईथर काम नहीं करते हैं;

मुझे पता है कि div सामग्री आकार प्राप्त करने के लिए getComputedStyle का उपयोग करके जावास्क्रिप्ट के साथ ऐसा कैसे करें, और गणित को स्थिति को ठीक करने के लिए करें, लेकिन मुझे शुद्ध सीएसएस समाधान चाहिए, क्योंकि मैं हर बार जेएस ट्रिगर नहीं करना चाहता मेरी div सामग्री बदलती है।

स्रोत

2012-05-20 Vitim.us

और आपकी 'div' सामग्री कैसे बदल रही है? सादे सीएसएस एनीमेशन या जावास्क्रिप्ट एनिमेशन के माध्यम से? – balexandre

@balexandre में कोई एनीमेशन नहीं है, अजाक्स –

क्या इस काम को कुछ पसंद आएगा? यह display: table-cell का भी उपयोग करता है लेकिन इसे 2 div टैग को काम करने की आवश्यकता होती है ... पैरेंट टैग display: table शैली निर्दिष्ट है।

एनबी: मैंने केंद्रबेस श्रेणी में z-index:-1; जोड़ा। आप इसे अपने डिजाइन के आधार पर ट्विक करना चाहते हैं।

<style> 
.centerbase{ 
    display: table; 
    vertical-align: middle; 
    height:100%; 
    width:100%; 
    text-align:center; 
    position:fixed; 
    z-index:-1; 
} 
.centerpane{ 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 
<div class="centerbase"> 
    <div class="centerpane"> 
     <img src="https://www.google.com/images/srpr/logo3w.png" /> 
    </div> 
</div>

आप पाठ कि centerpane भीतर केंद्र मेल नहीं किया गया जोड़ने की जरूरत है, तो आप centerpane अंदर एक और div जोड़ सकते हैं और की तरह कुछ के रूप में शैली निर्दिष्ट कर सकते हैं: text-align:left; width:400px; margin:0px auto; आप इस अतिरिक्त div के लिए एक चौड़ाई निर्दिष्ट करना होगा ।

स्रोत

2012-05-20 06:31:38 signal2013

demo देखें (ऊंचाई अज्ञात है, चौड़ाई सेट है)।

आप सीएसएस टेबल का उपयोग कर सकते हैं (इस उदाहरण में एचटीएमएल तालिका है जबकि शरीर एक टेबल सेल है)। मार्कअप:

<body> 

    <div id="container"> 
     <h1>Lorem ipsum</h1> 
     <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    </div> 

</body>

सीएसएस:

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 
#container { 
    width: 400px; 
    margin: 0 auto; 
    background: #ffea00; 
    border: 2px solid #ff9800; 
}

आप IE < = 7 के लिए एक समाधान की जरूरत है (आईई < के बाद से = 7 मेज के बारे में पता नहीं है | तालिका सेल)?

स्रोत

2012-05-20 08:31:57 roger

के माध्यम से सामग्री परिवर्तन मुझे बस जटिल ब्राउज़र समर्थन की आवश्यकता है। एचटीएमएल और बॉडी शैलियों को बदलना पेज पर अन्य इनलाइन सामग्री के साथ गड़बड़ नहीं करता है, या यह एक div wrapper के साथ काम करता है? –

आप सीएसएस टेबल की मदद से अज्ञात ऊंचाई वाले बॉक्स को लंबवत रूप से केंद्रित कर सकते हैं। बॉक्स की ऊंचाई इसकी सामग्री द्वारा निर्धारित की जाती है। यह demo देखें जो स्थिति का उपयोग करता है: बॉक्स के लिए निश्चित संपत्ति। बॉक्स की चौड़ाई भी सेट है।

और यह आईई < = 7 के लिए समाधान नहीं है:

#table { 
    height:100%; 
    text-align:center; 
    white-space: nowrap; 
} 
#container { 
    display: inline; 
    zoom: 1; 
    text-align: left; 
    vertical-align: middle; 
} 
#IEcenter { 
    height: 100%; 
    width: 1px; 
    display: inline; 
    zoom: 1; 
    vertical-align: middle; 
} 
#container * { 
    white-space: normal; 
}

यह आपकी आवश्यकताओं को पूरा करता है?

स्रोत

2012-05-20 17:28:03

यदि आप पदों के साथ काम कर रहे हैं, तो परिवर्तन गुण यहां सहायक होंगे।

तुम बस तत्व है जो केंद्रित करना पड़ता है करने के लिए नीचे दिए गए गुण जोड़ने के लिए है,

position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%);

अतिरिक्त मार्जिन को हटा दें और गद्दी तत्व को जोड़ा गया है।

स्रोत

2017-04-19 11:00:23

स्क्रीन पर अज्ञात आकार क्षैतिज और लंबवत के साथ एक डीआईवी कैसे केन्द्रित करें

उत्तर

संबंधित मुद्दे