ज्ञात आयामों के साथ div को देखते हुए, width: 300px; height: 200px कहें, स्क्रीन के बीच में लंबवत और क्षैतिज रूप से इसे रखने का सबसे आसान तरीका क्या है? Example hereखिड़की में एक div के ऊर्ध्वाधर + क्षैतिज केंद्र के लिए सबसे आसान तरीका क्या है?
मुझे नवीनतम फ़ायरफ़ॉक्स में दिलचस्पी है (आईई हैक की कोई ज़रूरत नहीं है)।
सीएसएस केवल कृपया, कोई जावास्क्रिप्ट नहीं।
स्थिति यह खिड़की/पैरेंट कंटेनर से 50% है और एक नकारात्मक मार्जिन आकार है कि का उपयोग तत्वों का आधा चौड़ाई/ऊंचाई :)
position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
, height: 100% स्थापित करने के लिए पर आप की आवश्यकता हो सकती दोनों body और html
html, body {
height: 100%;
}
संपादित करें: यहां एक काम कर रहे example है।
आप किस तरीके का उपयोग करने के लिए खुले हैं? उदाहरण के लिए सीएसएस किस स्तर पर - 2 या 3? जावास्क्रिप्ट? jQuery? मेरा पहला विचार यह है कि, चूंकि margin-left: auto; और margin-right: auto; के माध्यम से divs क्षैतिज रूप से केंद्रित हो सकते हैं, तो शायद सभी 4 पक्षों के लिए margin: auto; आज़माएं। अगर यह काम करता है तो मुझे बताएं।
सीएसएस -2 या 3? @ClarkeyBoy का क्या मतलब है? – Marko
वैसे मुझे नहीं पता कि CSS3 से कुछ भी उपलब्ध है या नहीं, लेकिन अगर इसे सीएसएस 2 में काम करने की ज़रूरत है। मैं यह जानने के लिए प्रयास नहीं कर रहा था कि क्या यह मामला बिना यह पता था कि यह पहली जगह CSS3 हो सकता है या नहीं। – ClarkeyBoy
वर्टिकल के लिए काम नहीं करता है। http://jsfiddle.net/Wv2jZ/15/ – Marko
आईई का समर्थन किए बिना, यह वास्तव में display: table और display: table-cell का उपयोग करके प्राप्त करना बहुत आसान है।
यहाँ अपने HTML के लिए एक अद्यतन है:
<div id='my_div'>
<div class="centered">this is vertically centered</div>
</div>
सीएसएस:
body, html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
border: 1px solid blue;
}
#my_div
{
width: 300px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
height: 100%;
display: table;
overflow: hidden;
}
.centered
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
और पूर्वावलोकन करने के लिए: http://jsfiddle.net/we8BE/
जिज्ञासा से बाहर, आपके पास '# my_div' के लिए 2 ऊंचाई घोषणा क्यों हैं? – Marko
आह, अच्छा पकड़ो। मैंने नहीं देखा कि आपकी शैलियों में परिभाषित ऊंचाई पहले से ही थी। यह वही नहीं हो सकता है जो आप खोज रहे हैं, लेकिन यह एक प्रदर्शन है कि यह गैर-आईई सेटिंग में कैसे किया जा सकता है। – wsanville
केंद्रित div 100% ऊंचाई है - मूल प्रश्न 200px कहा गया है। यदि आप 100% ऊंचाई को हटाते हैं (कम से कम क्रोम में नहीं) तो यह काम नहीं करता है। फ़ायरफ़ॉक्स मेरी मशीन पर अच्छी तरह से नहीं चलता है इसलिए इसका परीक्षण नहीं कर सकता - मुझे उम्मीद है कि क्रोम वही व्यवहार करेगा। – ClarkeyBoy
सबसे आसान? jQuery center plugins में से कई उपलब्ध ...
मेरी पोस्ट पर टिप्पणियां पढ़ें - "मेरा मतलब निश्चित रूप से जावास्क्रिप्ट के बिना है।" – ClarkeyBoy
@ClarkeyBoy: ठीक है ... जब मैंने लिखना शुरू किया था तब टिप्पणी नहीं थी ... कोई समस्या नहीं! – Lorenzo
यह डाउन-वोट के लायक नहीं है क्योंकि मूल पोस्ट जेएस के बिना स्पष्ट रूप से नहीं कहता था। मैं सिर्फ इसी कारण से ऊपर उठाने जा रहा हूं :) – Marko
मुझे नहीं पता कि यह सबसे आसान तरीका है, लेकिन ऐसा लगता है कि यह काम करता है।
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
यह वही समाधान का उपयोग कर रहा है जो मैं हूं :) – Marko
नहीं 'स्थिति चाहेंगे: अधिक उपयुक्त हो fixed'? – sje397
@ sje397, यह इस बात पर निर्भर करेगा कि वे चाहते हैं कि div पृष्ठ के साथ स्क्रॉल करें या नहीं। – Marko
@ मार्को, यह 'html, body' पर 'ऊंचाई: 100%' सेट किए बिना काम करता है। इसकी आवश्यकता क्यों है? –