मैं एक HTML पृष्ठ के लिए एक वैध पार ब्राउज़र समाधान के लिए देख रहा हूँ जो:पूर्ण-स्क्रीन लंबवत-केंद्रित HTML पृष्ठ के लिए विधि?
<div> जो मुख्य सामग्रीमुझे पता है कि रैपिंग कंटेनर की स्थिर ऊंचाई होने पर लंबवत केंद्रिंग संभव है। ब्राउजर विंडो ऊंचाई पर इस ऊंचाई को समायोजित करना कुछ व्यवहार्य है? (अधिमानतः, कोई जेएस इस्तेमाल नहीं किया जाना चाहिए।)
"क्रॉस ब्राउज़र" के साथ आपका क्या मतलब है, इस पर निर्भर करता है।
एचटीएमएल:
<div id="a">
<div id="b">
<div id="content"></div>
</div>
</div>
सीएसएस:
html, body, #a {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#a {
display: table;
}
#b {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
#content {
border: 5px solid red;
width: 100px;
height: 100px;
margin: auto;
}
लाइव उदाहरण:
के बाद सभी मौजूदा मानकों संगत लोगों (इस प्रकार नहीं IE6) के साथ ठीक काम करता हैजावास्क्रिप्ट के बिना कम से कम संभव नहीं है, कम से कम सीएसएस 2 या इससे पहले नहीं (सुनिश्चित नहीं है कि CSS3 इसे संभव बनाता है, कोई उस पर स्पष्टीकरण देता है)।
अन्य प्रदान किए गए उत्तरों को तत्व के लिए पूर्ण चौड़ाई और ऊंचाई की आवश्यकता होती है; मुझे ऐसी कोई आवश्यकता नहीं मानी। बहने वाले तत्व को लंबवत रूप से केंद्रित करने का कोई तरीका नहीं है जो आप आमतौर पर चाहते हैं, यह देखते हुए कि आप ब्राउज़र विंडो के पहलू अनुपात को सामग्री के लिए निश्चित आकार के कंटेनर का विश्वसनीय रूप से उपयोग करने के बारे में नहीं जानते हैं।
आप ऐसा कुछ कर सकते हैं। यह आईई 6 में भी काम करता है:
<html> <head>
<script type="text/javascript"> </script>
<style type="text/css">
#container { height: 100%; width: 100%; position: relative; }
#content {
border: 5px solid red;
width: 100px;
height: 100px;
position: relative;
margin-left: -50px;
margin-right: -50px;
top: 50%;
left: 50%; }
</style>
</head> <body>
<div id="container">
<div id="content"></div> </div>
</body> </html>
एचटीएमएल/सीएसएस के रूप में कोई जेएस के साथ मुश्किल नहीं है यह जानने का कोई तरीका नहीं है कि ब्राउजर विंडो की ऊंचाई क्या है। मुझे लगता है कि यह जेएस के साथ ब्राउज़र विंडो की ऊंचाई का पता लगाने के लिए संभव है (और यदि उपयोगकर्ता का आकार बदलता है तो निश्चित रूप से इस ऊंचाई में परिवर्तन) और स्थिर तत्वों की ऊंचाई को इस तरह से सेट करना। –
http://reisio.com/examples/ से वर्टसेन्टर या डेडेंटर को मुश्किल बिट्स – reisio
@reisio - अद्भुत उदाहरणों को कवर करना चाहिए! क्या आप इसे उत्तर के रूप में पोस्ट कर सकते हैं ताकि मैं ठीक से ऊपर उठा सकूं? –