आज हम एक सुसुवतारी को सेंटर करने की कोशिश करेंगे। इन छोटे जीवों को आमतौर पर 'सूट्स' कहा जाता है और ये इधर-उधर घूमना पसंद करते हैं, इसलिए हमें इन्हें स्थिर रखकर सेंटर में लाना होगा ताकि हम इनकी तस्वीर ले सकें। चलिए शुरू करते हैं!
नोट: पढ़ते समय, कृपया ब्लॉग के रिपॉजिटरी को भी देखें।
HTML में इमेज जोड़ना
इमेज को सेंटर करने की जरूरत बहुत आम है। मान लीजिए हमारे पास सूट की इमेज है और हम इसे पारंपरिक img टैग से जोड़ते हैं:
<img class="soot" src="soot.jpg" alt="soot!">
याद रखें: जब आप इमेज टैग लिखते हैं, तो ध्यान रखें कि इस टैग का कोई चाइल्ड नोड नहीं हो सकता, इसलिए हम इसे क्लोज नहीं करते। हालांकि ब्राउज़र क्लोजिंग </img> टैग होने पर शिकायत नहीं कर सकता, लेकिन इस पर लागू CSS काम नहीं कर सकता। इसलिए ऊपर दिए गए कन्वेंशन का पालन करें।
अब, बिना किसी CSS के इमेज जोड़ते ही, यह पेज पर इस तरह दिखेगी:
ऐसा इसलिए होता है क्योंकि हमारी इमेज पेज के डिफ़ॉल्ट फ्लो के अनुसार पोजिशन होती है, इस मामले में बाईं ओर, बिल्कुल हमारे टाइटल की तरह।
सेंटरिंग मेथड 1: margin: 0 auto
हमारे सूट को सेंटर करने का सबसे आसान तरीका है अपने img सेलेक्टर पर निम्न स्टाइलिंग लागू करना:
img.soot { margin: 0 auto; display: block; }
यहां हम अपने इमेज सेलेक्टर में क्लास नेम जोड़ रहे हैं ताकि अधिक स्पेसिफिसिटी मिले, यदि हम और सूट जोड़ते हैं, तो यह सुनिश्चित हो सके कि वे सभी सेंटर हों।
अब आइए अपना पेज चेक करते हैं और हाँ, हमारी इमेज सेंटर हो गई है!
तो हुआ क्या?
- हमारा
marginएट्रिब्यूट चार पैरामीटर स्वीकार कर सकता है: पहले दो टॉप और बॉटम के लिए, और अन्य दो लेफ्ट और राइट के लिए। यहां हम ब्राउज़र को बता रहे हैं कि लेफ्ट और राइट मार्जिन निर्धारित करें, जो इस मामले में ब्राउज़र उन्हें बराबर सेट करता है और इस प्रकार इमेज सेंटर हो जाती है। - हमारी
displayप्रॉपर्टी के कई मान हो सकते हैं। इस मामले में हम 'block' चुनते हैं जो मूल रूप से img एलिमेंट को पूरी चौड़ाई लेने और अपनी लाइन पर रहने के लिए कहता है। इसलिए जब हम मार्जिन लागू करते हैं, तो हम सुनिश्चित करते हैं कि यह पूरी इमेज की चौड़ाई पर लागू हो, इसलिए यह सेंटर हो जाती है।
सेंटरिंग मेथड 2: text-align: center;
हम अपने सूट को पैरेंट एलिमेंट के अंदर रखकर भी सेंटर कर सकते हैं। मान लीजिए एक div और फिर पैरेंट पर text-align करें। अपनी इमेज को संरेखित करने के लिए सुनिश्चित करें कि आप इसे पैरेंट एलिमेंट (जिसे अक्सर कंटेनर एलिमेंट कहा जाता है) में जोड़ते हैं:
.container { text-align: center; }
चूंकि हमारा div एलिमेंट स्वभाव से एक ब्लॉक कंटेनर है, यह पूरी चौड़ाई लेगा और इसके चाइल्ड सेंटर होंगे - इस मामले में हमारी सूट इमेज!
निष्कर्ष
Susuwatari का उच्चारण मुंह भरने जैसा लगता है (बस इसे कई बार कहने की कल्पना करें)। दूसरी ओर, इमेज को सेंटर करना, वास्तव में बहुत आसान है ना!
