सीएसएस - नेस्टेड divs कैसे केन्द्रित करें?

सीएसएस के लिए नया।सीएसएस - नेस्टेड divs कैसे केन्द्रित करें?

मैं नीचे

एचटीएमएल

<html> 
    <head> 
     <title>My website</title> 
     <link rel="stylesheet" type="text/css" href="css/main.css" /> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="formpanel"> 
       <div id="loginForm"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

सीएसएस

body { 
    margin: 0; 
    background : #90ADB7 url('images/background.png') repeat-x; 
    font-family: verdana, sans-serif; 
    font-size: 0.85em; 

} 

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
    border-style:solid; 
    padding: 190px 0; 
} 

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
} 

#loginForm { 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

समस्या है कोड का उपयोग कर नेस्टेड divs केंद्रित करने के लिए कोशिश कर रहा हूँ कि आंतरिक div (#loginForm) बाहरी div (#formpanel) के शीर्ष किनारे के साथ flushes। मुझे आंतरिक div को कैसे केन्द्रित करना चाहिए?

स्क्रीनशॉट enter image description here

स्रोत

2011-12-07 Rahul

के बाद से @ 2011 से BillyMoon के जवाब हटाने कतार में है, यहाँ लिंक वह मूल रूप से तैनात है: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – royhowie

आप रिश्तेदार पोजीशनिंग इस्तेमाल कर सकते हैं:

http://jsfiddle.net/a879W/

स्रोत

2011-12-07 14:59:07 ptriek

धन्यवाद। यह काम। Jsfiddle के लिए भी धन्यवाद। इस उपकरण के बारे में नहीं पता था। पोस्टरिटी के लिए – Rahul

: #loginForm { मार्जिन: ऑटो; स्थिति: रिश्तेदार; शीर्ष: 25%; चौड़ाई: 50%; ऊंचाई: 50%; पृष्ठभूमि-रंग: नीला; } – Rahul

#formpanel { 
    position: relative; 
    ... 
} 

#loginForm { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
    width: 200px; 
    height: 200px; 
    background-color:blue; 
}

स्रोत

2011-12-07 14:56:40

#loginForm { 
    position:absolute; 
    top:25%; 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

संपादित करें: शीर्ष: 25% नहीं 50%।

स्रोत

2011-12-07 14:57:08 Jivings

मुझे लगता है कि यह शीर्ष होना चाहिए: 25% ... – ptriek

अच्छा, मुझे याद आया। धन्यवाद। – Jivings

@ जिविंग्स, यह काम नहीं करता है। क्या आप स्थिति के बारे में निश्चित हैं: पूर्ण? – Rahul

आप पूर्ण स्थिति का उपयोग कर सकते हैं:

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
    position:relative; 
} 

#loginForm { 
    position: absolute; 
    width: 200px; 
    height:200px; 
    left: 100px; 
    top: 100px; 
    background-color:blue; 
}

स्रोत

2011-12-07 14:58:56

और यदि विंडो का आकार बदल गया है? निरंतर स्थिति घटकों को केंद्रित करने के लिए कोई अच्छा नहीं है। – Jivings

मैंने माना, चूंकि रैपर div की एक निश्चित चौड़ाई है, इसलिए विंडो का आकार बदलने की आवश्यकता नहीं है ... –

सीएसएस - नेस्टेड divs कैसे केन्द्रित करें?

उत्तर

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