कोडलैब (कोड बनाना सीखना): सीएसएस में सेंटर देना

इस कोडलैब में, सीएसएस में कॉन्टेंट को बीच में दिखाने का अपना पसंदीदा तरीका शेयर और दिखाने का तरीका बताया गया है.

सीएसएस में किसी एलिमेंट को बीच में रखने के मेरे पांच पसंदीदा तरीकों के बारे में जानने के लिए, मेरी ब्लॉग पोस्ट सीएसएस में एलिमेंट को बीच में रखना पढ़ें. इसके अलावा, यह वीडियो भी देखें!

सेटअप

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  2. app/index.html खोलें
  3. line 23 पर, /* your centering CSS here /* को अपनी सीएसएस से बदलें
  4. (ज़रूरी नहीं) अपने टेक्स्ट को बीच में रखने की तकनीक को कोई नाम दें और <h1> में टेक्स्ट बदलें

स्टाइल

  1. app/css/ फ़ोल्डर में नई फ़ाइल बनाना
  2. .turbo-center या [floaty-mcfloat] जैसे सेंटरिंग सलूशन को होल्ड करने के लिए, एक सिलेक्टर बनाएं
  3. उस नए सिलेक्टर में, अपने आइटम को बीच में रखने का तरीका लिखें. उदाहरण के तौर पर, app/css/ में मौजूद अन्य तरीकों को देखें
  4. (ज़रूरी नहीं) कुछ "सहायता स्टाइल" लिखें, ताकि हम यह देख सकें कि किन बच्चों को केंद्रित करने के लिए स्टाइल की ज़रूरत है
  5. app/css/index.css खोलें और सबसे नीचे अपनी नई फ़ाइल इंपोर्ट करें

सभी जानकारी को एक साथ जोड़ना

  1. app/index.html को फिर से खोलें
  2. <article> ढूंढें और उसे वह कस्टम सिलेक्टर दें जो आपने पिछले सेक्शन के चरण #2 में बनाया था.
  3. अपने Glitch प्रोजेक्ट को ट्वीट करें और हम उसे ब्लॉग पोस्ट में दिखाएंगे!