मैं अज्ञात चौड़ाई की पूरी तरह से स्थित सामग्री कैसे केंद्रित करूं?

Question

इससे पहले कि कोई मुझसे पूछे कि मैं ऐसा क्यों करना चाहता हूं, मुझे सीधे बाहर आने दें और आपको बताएं। इस तरह से आप में से एक चतुराई से बाहर निकलता है, मुझे एक बेहतर तरीका बता सकता है ...

मैं चित्रों के लिए दर्शक बना रहा हूं जो पृष्ठ को भरने के लिए खिंचाव करना चाहिए, स्क्रीन की ऊंचाई का 9 0% सटीक। मैं चित्रों को एक दूसरे में फीका करना चाहता हूं और उनमें से प्रत्येक को स्क्रीन के बीच में केंद्रित करना चाहता हूं।

एक दूसरे के ऊपर पेंटिंग को फीका करने के लिए मुझे उन्हें स्टैकिंग से रोकने के लिए उन्हें 'पूर्ण' रखने की आवश्यकता है। यहां समस्या है जहां समस्या आती है। जब से मैंने उन्हें पूर्ण रूप से सेट कर दिया है, तब से प्रत्येक विधि जो मैं div के केंद्र में उपयोग करने के लिए उपयोग करता हूं, काम नहीं करता है।

समस्या का एक हिस्सा यह है कि मैं चित्रों के लिए कोई चौड़ाई निर्धारित नहीं कर रहा हूं क्योंकि मैं चाहता हूं कि वे उपयोगकर्ता की स्क्रीन के 90% को भरने के लिए गतिशील रूप से आकार दें।

मुझे पूर्ण सामग्री को केंद्रित करने के लिए सैकड़ों विधियां मिली हैं और मुझे विश्वास है कि मुझे युक्त div को लपेटने की आवश्यकता हो सकती है। हालांकि मुझे अभी तक कोई सफलता नहीं मिली है।

html-

<div id="viewer_div"> 
    <img src="" id="first" /> 
    <img id="second" class="hidden"/> 
</div> 

स्टाइल शीट

#viewer_div { 
     width:1264px; 
} 


img { 
    height:90%; 
    display:block; 
    margin-left: auto; 
    margin-right:auto; 
} 

ऊपर मुझे वांछित प्रभाव देता है, लेकिन मुझे पूर्ण रूप से चित्रों को अनुमति नहीं है। क्या कोई छवियों को केंद्रित करने का एक तरीका सुझा सकता है लेकिन मुझे एक दूसरे पर फीका करने की इजाजत देता है?

Answer 1

या तो JavaScript का उपयोग चौड़ाई की गणना करने के लिए और इसे ले जाते हैं,

एक सीएसएस हैक का उपयोग 50% से तत्व दाएं और बाएं स्थानांतरित करने के लिए,

या बिल्कुल यह स्थिति नहीं है।

---

यह उत्तर अविश्वसनीय रूप से छोटा है, लेकिन यह बिंदु है। यदि आपको कुछ केंद्रीकृत करने की आवश्यकता है (जिसका अर्थ है कि आप ब्राउज़र को यह निर्धारित करना चाहते हैं कि केंद्र बिंदु कहां है, और उसे वहां रखें), तो आप पूर्ण स्थिति का उपयोग नहीं कर सकते - क्योंकि यह ब्राउज़र से नियंत्रण लेता है।

---

में एक दूसरे पर मैं स्थान देने के लिए 'पूर्ण' उन्हें stacking से रोकने की आवश्यकता चित्रों फीका करने के लिए।

यह वह जगह है जहां आपकी समस्या निहित है। आपने माना है कि को गलत कारण के लिए पूर्ण स्थिति की आवश्यकता है।

आप एक दूसरे के ऊपर पर तत्वों रखकर समस्याओं का सामना कर रहे हैं, तो एक बिल्कुल तैनात कंटेनर जो 100% चौड़ाई और text-align: center

---

है में छवियों लपेट आप कैसा महसूस करते हैं, तो पूर्ण स्थिति है कि आवश्यक हो, तो निम्न हैक कर वांछित परिणाम हासिल करने के लिए इस्तेमाल किया जा सकता:

div { 
    position: absolute; 
    /* move the element half way across the screen */ 
    left: 50%; 
    /* allow the width to be calculated dynamically */ 
    width: auto; 
    /* then move the element back again using a transform */ 
    transform: translateX(-50%); 
} 

जाहिर है इसके बाद के संस्करण हैक एक भयानक code smell है, लेकिन यह काम कुछ ब्राउज़रों पर है। ध्यान रखें: यह हैक अन्य डेवलपर्स, या अन्य ब्राउज़रों (विशेष रूप से आईई या मोबाइल) के लिए जरूरी नहीं है।

Answer 2

इसकी चौड़ाई के 50% द्वारा तत्व left धक्का और फिर 50% द्वारा क्षैतिज यह अनुवाद मेरे लिए काम किया है।

.element { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

मैं नीचे दिए गए लिंक में अवधारणा पाया, और फिर मैं अपने क्षैतिज संरेखित जरूरत है फिट करने के लिए अनुवाद: https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css

Answer 3

Samec के जवाब से दूर जाने के लिए, आप भी इस का उपयोग कर सकते एक निरपेक्ष स्थिति तत्व केंद्र के लिए अज्ञात आयामों के लंबवत और क्षैतिज:

#viewer_div { 
    position: relative; 
} 
#viewer_div img { 
    position: absolute; 
    left: 50%; 
    top: 0%; 
    transform: translate(-50%, 50%); 
}