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

Adam Argyle

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

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

सेटअप

  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> ढूंढें और इसे पिछले सेक्शन के दूसरे चरण में बनाया गया कस्टम सिलेक्टर दें.
  3. अपने Glitch के बारे में मुझे ट्वीट करें. हम इसे ब्लॉग पोस्ट में शामिल करेंगे!