CSS3 में एक छवि को कैसे केन्द्रित करें?

जॉन पॉल मुलर द्वारा

CSS3 के बारे में सबसे अधिक पूछे जाने वाले प्रश्नों में से एक यह है कि पृष्ठ पर किसी छवि को कैसे केन्द्रित किया जाए। दुर्भाग्य से, आपको प्राप्त होने वाले अधिकांश उत्तर केवल चर्चा करते हैं टैग, एक कंटेनर को केंद्र में रखने का तरीका दिखाए बिना। कंटेनर का उपयोग करना महत्वपूर्ण है क्योंकि आप बाद में उस छवि में अन्य आइटम जोड़ना चाह सकते हैं। निम्नलिखित प्रक्रिया बताती है कि छवि को कैसे केन्द्रित किया जाए।



  1. SimpleGraphics.CSS फ़ाइल खोलें और निम्न शैली जोड़ें।



    #ImageContainer img { height: 400px; width: 400px; margin: 0px; }

    इस शैली का उद्देश्य एक विशिष्ट आकार की छवि बनाना है। विभिन्न आकारों की छवियों से निपटने के कई तरीके हैं। यह उनमें से एक है। यह तब अच्छा काम करता है जब आपकी अधिकांश छवियां लगभग समान आकार की हों।

    कुछ मामलों में, जैसे कि जब आप व्यापक रूप से भिन्न आकारों की छवियों को केंद्रित कर रहे हों, तो आपको जावास्क्रिप्ट का उपयोग करना चाहिए। छवि को पृष्ठ के केंद्र में रखने के लिए, आपको छवि का आकार पता होना चाहिए। कई तृतीय-पक्ष लाइब्रेरी आपके लिए छवियों को ऑनस्क्रीन केंद्रित करना आसान बनाती हैं - केवल CSS तकनीक की सीमाएँ होती हैं।



  2. #ImageContainer शैली में निम्न कोड जोड़ें।

    position: absolute; height: 400px; width: 400px; left: 50%; margin-left: -205px;

    यह कोड सेट करता है

    निरपेक्ष के रूप में स्थिति और इसे छवि के समान आकार देता है, ताकि और टैग जुड़े हुए हैं। इसके बाद यह पूरे पृष्ठ में 50% के बाईं ओर रखता है, ताकि उपयोगकर्ता ब्राउज़र विंडो को कैसे भी बदले, वसीयत का बायां हिस्सा केंद्र में रहेगा।

    बेशक, आप के बाईं ओर केंद्रित नहीं करना चाहते हैं



    - आप छवि को केंद्र में रखना चाहते हैं। मार्जिन-बाएं सेटिंग बाएं हाशिए को 205 पिक्सेल बाईं ओर ले जाती है (छवि का आधा समग्र आकार, साथ ही पैडिंग), ताकि छवि का केंद्र अब पृष्ठ के केंद्र में हो।
  3. CSS फ़ाइल सहेजें और पृष्ठ को पुनः लोड करें।

    आप पृष्ठ पर केंद्रित छवि और उसके फ्रेम को देखते हैं।

    छवि0.jpg